解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題
最近遇到了個(gè)問(wèn)題，用v-bind動(dòng)態(tài)綁定img的src，圖片加載不出來(lái)?？刂婆_(tái)顯示src是有獲取到圖片地址的，可是就是加載不出來(lái)。
最后才發(fā)現(xiàn)原因原來(lái)是瀏覽器中直接顯示'./img/img1.png'，也就是沒(méi)有經(jīng)過(guò)編譯的步驟，直接將獲取到的數(shù)據(jù)當(dāng)作字符串顯示。
解決方法：
1.在當(dāng)前界面全局import圖片地址
//使用import引入
import img1 from './img/img1.png'
import img2 from './img/img2.png'
export default {
data() {
return {
imgList[
{
id: 0,
imgUrl: img1
},
{
id: 1,
imgUrl: img2
}
]
}
}
}
在Html中使用
<img v-for="item in imgList" :key="item.id" :src="imgUrl" />
2.使用require
用第一種方法可能會(huì)很繁瑣，數(shù)據(jù)多的時(shí)候就不好一個(gè)一個(gè)import了，此時(shí)用require動(dòng)態(tài)加載
getImage() {
this.imgList.forEach(item => {
item.imgUrl = require('./img/' + item.name + '.png')
})
}
data里的數(shù)據(jù)（此方法就不用再import啦）
data() {
return {
imgList[
{
id: 0,
name: 'img1',
imgUrl: ''
},
{
id: 1,
name: 'img2',
imgUrl: ''
}
]
}
}
以上方法就可以解決圖片動(dòng)態(tài)綁定后不能顯示的問(wèn)題啦，視頻同理喲！
總結(jié)
以上所述是小編給大家介紹的解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀
這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue頁(yè)面params傳值的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+elementUI封裝一個(gè)根據(jù)后端變化的動(dòng)態(tài)table(完整代碼)
這篇文章主要介紹了vue+elementUI,封裝一個(gè)根據(jù)后端變化的動(dòng)態(tài)table,實(shí)現(xiàn)了自動(dòng)生成和插槽兩個(gè)方式，主要把el-table 和el-pagination封裝在一起，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue 的 keep-alive 是一個(gè)內(nèi)置組件,用于緩存不活動(dòng)的組件實(shí)例,避免重復(fù)渲染,從而優(yōu)化應(yīng)用性能,下面就跟隨小編一起來(lái)看看其核心實(shí)現(xiàn)原理和緩存內(nèi)容吧2025-03-03
vue動(dòng)態(tài)設(shè)置頁(yè)面title的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)設(shè)置頁(yè)面title的相關(guān)資料，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue項(xiàng)目配置代理如何解決跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue教程之toast彈框全局調(diào)用示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
基于Vue實(shí)現(xiàn)可選擇不連續(xù)的時(shí)間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實(shí)現(xiàn)一個(gè)可選擇不連續(xù)的時(shí)間范圍的日期選擇器，文中的示例代碼簡(jiǎn)潔易懂，需要的可以參考一下2023-06-06
詳解為什么Vue中不要用index作為key(diff算法)
這篇文章主要介紹了詳解為什么Vue中不要用index作為key(diff算法)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04