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