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+element實(shí)現(xiàn)錨點(diǎn)鏈接方式
這篇文章主要介紹了vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了詳解Vue2.0之去掉組件click事件的native修飾,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
本文提供了如何將Vue3的靜態(tài)頁面集成到基于Vue2的若依項(xiàng)目中,并確保能夠訪問Vue2的接口,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-09-09
Vue導(dǎo)出el-table表格為Excel文件的兩種方式
在開發(fā)過程中,我們經(jīng)常需要將表格數(shù)據(jù)導(dǎo)出為 Excel 文件,大多數(shù)情況下,由后端處理即可,但是當(dāng)數(shù)據(jù)量不大、需要快速響應(yīng)用戶操作、或者數(shù)據(jù)已經(jīng)在前端進(jìn)行處理和展示時(shí),前端該如何實(shí)現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09
基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
Nuxt.js nuxt-link與router-link的區(qū)別說明
這篇文章主要介紹了Nuxt.js nuxt-link與router-link的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了vue-cli 3 全局過濾器的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05