react圖片引入不顯示如何解決

本文小編為大家詳細(xì)介紹“react圖片引入不顯示如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react圖片引入不顯示如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)一直通過網(wǎng)站建設(shè)和網(wǎng)站營銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)互聯(lián)產(chǎn)品、全網(wǎng)營銷推廣服務(wù)為核心業(yè)務(wù)。10余年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

react圖片引入不顯示的解決辦法：1、通過“”方式引入圖片；2、通過“import zzsc from "./zzsc1.png"”方式引入圖片， 然后在img中直接引入變量即可。

一、react中圖片引入方式

以前我們用img引入圖片只需要如下即可，在react中這樣寫會報(bào)錯(cuò)：

下面我總結(jié)了兩種方式：

1、用require方式引入路勁 錯(cuò)誤用法：

上面這樣寫也是不會生效的，因?yàn)槿绻褂胏reate-react-app和require導(dǎo)入圖像，require返回一個(gè)ES模塊而不是字符串。這是因?yàn)樵趂ile-loader中，esModule選項(xiàng)是默認(rèn)啟用的。

所以用以下方式之一導(dǎo)入圖像：后面加上.default即可

2、通過!important引入

import zzsc from "./zzsc1.png"

然后在img中直接引入變量即可，這個(gè)變量名字可任意取

效果圖如下：

然而有的時(shí)候你開發(fā)環(huán)境圖片顯示出來了，但是在打包后部署到測試環(huán)境上時(shí)會發(fā)現(xiàn)，圖片又沒了，抓耳撓腮，想不明白問題出在哪里。其實(shí)很簡單，webpack在打包是只能檢索到你public文件夾下的圖片，所以在放圖片素材的時(shí)候，圖片位置也非常重要！統(tǒng)一都放到public文件下即可。上代碼：

在打包是你路勁前面如果加“./”，則需要寫全部路勁，不加更省事兒。

讀到這里，這篇“react圖片引入不顯示如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：react圖片引入不顯示如何解決
網(wǎng)頁網(wǎng)址：http://m.jiaotiyi.com/article/ipejjs.html