第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

require 函數(shù)無(wú)法在反應(yīng)中處理圖像

require 函數(shù)無(wú)法在反應(yīng)中處理圖像

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

3 回答

?
回首憶惘然

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊

使用這個(gè),它對(duì)我有用

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


解釋 :

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

如果您控制臺(tái)它們,則 value fromcalendarPic是一個(gè)路徑,但如果您使用,則該值是一個(gè)像here這樣的require對(duì)象。


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
繁星coding

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊

我猜問(wèn)題是圖像的位置。當(dāng)您使用create-react-app該應(yīng)用程序時(shí),該應(yīng)用程序?qū)⒈焕壍皆?code>public文件夾中。然后該require語(yǔ)句將開(kāi)始獲取圖像 - 在本例中是相對(duì)于文件public夾而不是相對(duì)于src文件夾。

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


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
慕婉清6462132

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊

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


const F = {

  name: "Wei?",

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

}

圖像標(biāo)簽內(nèi):


src = { F.image }


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 3 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)