解決react,＜img＞src使用require方法引入圖片不顯示問題

2年前作者：多樂_π分類：Toy博客閱讀(22)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了解決react,＜img＞src使用require方法引入圖片不顯示問題。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

{settingList.map(i => (
       
 <img src={require(`./images/${i.deviceTypeName}.png`).default} />
       
))}

解決方法：

　　再導(dǎo)入的圖片后加.default即可

　　<img src={require('../../images/bg.png').default} alt="" />
?

推薦閱讀：https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html文章來源地址http://www.zghlxwxcb.cn/news/detail-610948.html

到了這里，關(guān)于解決react,＜img＞src使用require方法引入圖片不顯示問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

vue項(xiàng)目中，動(dòng)態(tài)src引入圖片，并且js根據(jù)文件名后綴，判斷文件圖片、視頻、文檔、pdf等類型的方法
vue根據(jù)文件地址，獲取后綴，根據(jù)后綴判斷類型，然后根據(jù)類型動(dòng)態(tài)展示不同類型的照片 1、處理后綴，根據(jù)后綴判斷類型? ?2、根據(jù)返回的結(jié)果，直接將文件名命名為返回的結(jié)果，比如我有個(gè)圖片類型的文件，經(jīng)過上述的方法，返回的是image，那我直接要顯示的圖片名稱就為
2024年02月06日
瀏覽(81)
圖片引入---img標(biāo)簽
img標(biāo)簽的作用是：告訴瀏覽器我們需要顯示一張照片， img標(biāo)簽運(yùn)用的格式： img? src=\\\"圖片的路徑\\\"? alt=\\\"對(duì)圖片的解釋說明\\\"/ 圖片的來源路徑有兩種：? ?1.本地圖片：首先將圖片添加至VScode文件中，然后根據(jù)圖片的位置選擇? ? ./ （當(dāng)前文件路徑）或者? ../ (上一級(jí)文件路
2024年02月12日
瀏覽(46)
解決項(xiàng)目遷移vite引入圖片資源報(bào)require is not defined的問題
Vite是一種輕量快速的前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)，而且官方已經(jīng)發(fā)布v4版本，相對(duì)比較穩(wěn)定。在把VueCli搭建的項(xiàng)目遷移到Vite的過程中遇到了個(gè)問題，下面分享一下問題及解決辦法。在 script 標(biāo)簽里面引入的圖片資源沒生效，然后一看控制臺(tái)，報(bào)錯(cuò)顯示 require
2024年02月03日
瀏覽(26)
Vue中使用require.context自動(dòng)引入組件的方法介紹
目錄一、自動(dòng)引入組件 1、語法 2、使用 2.1、在compoents文件下隨便創(chuàng)建index.js文件 2.2、mian.js引入該js 二、自動(dòng)生成路由 1、示例： 2、使用 2.1、在router文件下隨便創(chuàng)建autoRouter.js文件 2.2、在router文件下index.js文件中引入autoRouter.js文件三、總結(jié) 一、自動(dòng)引入組件我們項(xiàng)目開發(fā)
2024年02月03日
瀏覽(18)
Vue3 - vite 引入本地圖片方法，頁面引入本地靜態(tài)資源圖像詳細(xì)教程，解決 UI 前端組件庫的圖片屬性無法使用本地圖像問題（無論是本地開發(fā)還是打包部署，本地圖片的路徑正?？捎茫?/a>
在 webpack 中通常用 require() 來引入靜態(tài)圖片，但在 vite 中這種方法就不行了。本文實(shí)現(xiàn)了在 vue3+vite 項(xiàng)目開發(fā)中，實(shí)現(xiàn)引入本地圖片（靜態(tài)資源），并且 build 打包后依然正常運(yùn)行，支持普通 img 標(biāo)簽使用，也支持 UI 組件庫的各種 “圖片屬性” 當(dāng)參數(shù)進(jìn)行使用。如下圖所示
2024年02月08日
瀏覽(167)
Vue 項(xiàng)目路由、自定義指令、api方法自動(dòng)引入資源（require.context使用）
require.context(directory,useSubdirectories,regExp) 1：directory：哪個(gè)文件夾 2：useSubdirectories：是否需要找到子文件夾 3： regExp：正則表達(dá)式（一般指文件的后綴）以下是單個(gè)js文件接口的命名不能重復(fù)。如果項(xiàng)目較大，建議接口命名需要有一個(gè)統(tǒng)一的規(guī)范來避免出現(xiàn)命名重復(fù)的問題
2024年02月16日
瀏覽(51)
在Vue中動(dòng)態(tài)引入圖片為什么要用require
靜態(tài)資源和動(dòng)態(tài)資源靜態(tài)資源動(dòng)態(tài)的添加src 動(dòng)態(tài)資源我們通過網(wǎng)絡(luò)請(qǐng)求從后端獲取的資源動(dòng)態(tài)的添加src會(huì)被當(dāng)成靜態(tài)資源動(dòng)態(tài)的添加src最終會(huì)被打包成：動(dòng)態(tài)的添加圖片最會(huì)會(huì)被編譯成一個(gè)靜態(tài)的字符串，然后再瀏覽器運(yùn)行中會(huì)去項(xiàng)目中查找這個(gè)資源，靜態(tài)資源編譯默
2024年02月13日
瀏覽(28)
前端 ES6 環(huán)境下 require 動(dòng)態(tài)引入圖片以及問題
ES6 環(huán)境中，通過 require 的方式引入圖片很方便，一直以來也沒有出過什么問題，后來項(xiàng)目中，需要?jiǎng)討B(tài)引入圖片。 require 動(dòng)態(tài)引入也容易實(shí)現(xiàn)，百度也能搜到很多博客介紹。偶然發(fā)現(xiàn)項(xiàng)目中 require 引入圖片好像對(duì)打包體積影響挺大，js 會(huì)變大很多，經(jīng)過測(cè)試，終于確定原因
2024年02月07日
瀏覽(33)
使用html2canvas將整個(gè)元素導(dǎo)出為圖片，其中包含svg和img，解決img跟svg導(dǎo)出時(shí)img或svg(canvg處理)不顯示的問題，以及相關(guān)優(yōu)化
目錄前言一、準(zhǔn)備二、解決問題 1.將svg跟img轉(zhuǎn)為canvas的方法 2.將base64轉(zhuǎn)換成file文件的方法 3.點(diǎn)擊下載使用方法 1）.對(duì)dom沒有處理，需求只是將圖片導(dǎo)出即可 ?2）.涉及對(duì)dom的拖拽，流程圖之類的（需復(fù)制dom，在復(fù)制的dom上進(jìn)行處理） ?三、效果圖如下查閱很多相關(guān)的文章和
2024年01月20日
瀏覽(25)
獲取到img中src
let src = str.match(/imgs+(.*?)src=\\\'\\\"/g) let srcs = src.map(item={ let k= item.match(/src=\\\'\\\"[\\\'\\\"]/)[1] return k }) srcs = srcs?srcs:[]
2024年02月10日
瀏覽(19)