亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

require 函數無法在反應中處理圖像

require 函數無法在反應中處理圖像

撒科打諢 2023-08-18 16:44:55
我<img src={require('./somRelativePath/image.jpg)}在 React 中使用過很多次。然而,這一次似乎不起作用。沒有任何錯誤(例如找不到圖像等),但網站上的圖像已損壞。檢查完元素后,我對瀏覽器中的轉譯結果感到有些困惑:<img src="[object Module]" style="width: 5rem;">看起來好像它將圖像加載為組件而不是實際文件。我已經創建了該應用程序npx create-react-app,到目前為止還沒有彈出它。因此 babel 或 webpack 配置中沒有錯誤,因為它當前是由 React 在后臺處理的。使用語句導入它import效果很好:import calendarPic from '../assets/pictures/calendar.svg';不幸的是,這不是解決方案,因為我將本地圖像保存在 json 中,加載所有 50 張圖像肯定會非常重復且無效。同樣,npx create-react-app我以前也做過一些小型項目,但從未遇到過如此令人困惑但又如此基本的錯誤。我非常感謝您的任何回復,因為我已經瀏覽了互聯網上所有可能的解決方案。再次感謝您,祝您度過愉快的一天!
查看完整描述

3 回答

?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

使用這個,它對我有用

<img src={require('./somRelativePath/image.jpg').default}


解釋 :

值 fromlet image1require('./somRelativePath/image.jpg')不同于?import calendarPic from './somRelativePath/image.jpg';

如果您控制臺它們,則 value fromcalendarPic是一個路徑,但如果您使用,則該值是一個像here這樣的require對象。


查看完整回答
反對 回復 2023-08-18
?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

我猜問題是圖像的位置。當您使用create-react-app該應用程序時,該應用程序將被捆綁到該public文件夾中。然后該require語句將開始獲取圖像 - 在本例中是相對于文件public夾而不是相對于src文件夾。

我建議您嘗試將圖像移動到文件public夾中,并嘗試使用src相對于該public文件夾的 URL。


查看完整回答
反對 回復 2023-08-18
?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

上面的答案都不適合我。require(path)相反,我在 tag外部使用img并將其分配給一個變量,然后在imgtag內部使用該變量src。它就是這樣工作的。


const F = {

  name: "Wei?",

  image: require('./images/0453-Eastbourne-F961-F01.png')

}

圖像標簽內:


src = { F.image }


查看完整回答
反對 回復 2023-08-18
  • 3 回答
  • 0 關注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號