vue如何動態(tài)給img賦值
更新時間：2022年06月05日 14:37:07 作者：大佬，咋整啊
這篇文章主要介紹了vue如何動態(tài)給img賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)給img賦值
1.如果直接給img的src綁定一個字符串
<img :src=nowIcon />
?data () {
? ? return {
? ? ? nowIcon: ''
? ? }
? },??
this.nowIcon = '../assets/64/' + 圖片名 + '.png'vue會將這個路徑當(dāng)成字符串，不會給這個圖片路徑編譯，圖片顯示不出來
此時的路徑是未經(jīng)過編譯的，代碼為：
<img src='../assets/64/100.png' />?? ?
2.解決辦法
this.nowIcon = '../assets/64/' + 圖片名 + '.png'
改為
this.nowIcon = require('../assets/64/' + 圖片名 + '.png')此時的代碼是正常編譯后的路徑，圖片正常顯示
<img src="/img/101.ce5f2cfc.png">
vue動態(tài)賦值img的src,用require()
首先，單獨一個src是可以的
<img src="../../assets/logo.png" alt="圖片" />
數(shù)組是這樣的
想改為動態(tài)賦值的形式就實現(xiàn)不了
<img :src="item.img" alt="圖片" />
所以改為如下：
在webpack中會將圖片圖片來當(dāng)做模塊來用，因為是動態(tài)加載的，所以url-loader將無法解析圖片地址，將圖片作為模塊加載進(jìn)去
用require()就可以了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router解決相同路徑跳轉(zhuǎn)報錯的問題
這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue3中動態(tài)獲取高寬,實現(xiàn)思路大概是將監(jiān)聽到的高度賦給你需要設(shè)置的對象，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧2023-10-10
本文主要介紹了rollup3.x+vue2打包組件的實現(xiàn)，詳細(xì)的介紹了打包會存在的問題，包版本的問題，babel 轉(zhuǎn)換jsx等問題，具有一定的參考價值，感興趣的可以了解一下2023-03-03
這篇文章主要介紹了封裝 axios+promise通用請求函數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Echarts實現(xiàn)一張圖現(xiàn)切換不同的X軸(實例代碼)
這篇文章主要介紹了Echarts 如何實現(xiàn)一張圖現(xiàn)切換不同的X軸,通過動圖給大家展示效果，實例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-11-11
這篇文章主要為大家介紹了vue使用websocket概念及示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解vue express啟動數(shù)據(jù)服務(wù)
本篇文章主要介紹了vue express啟動數(shù)據(jù)服務(wù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項目中如何使用TypeScript相關(guān)配置
這篇文章主要給大家介紹了關(guān)于vue項目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過程中廣泛被應(yīng)用,在這里總結(jié)下項目中ts的應(yīng)用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11