解決Vue動(dòng)態(tài)加載本地圖片問題
最近遇到了個(gè)問題，用v-bind動(dòng)態(tài)綁定img的src，圖片加載不出來?？刂婆_(tái)顯示src是有獲取到圖片地址的，可是就是加載不出來。
最后才發(fā)現(xiàn)原因原來是瀏覽器中直接顯示'./img/img1.png'，也就是沒有經(jīng)過編譯的步驟，直接將獲取到的數(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)綁定后不能顯示的問題啦，視頻同理喲！
總結(jié)
以上所述是小編給大家介紹的解決Vue動(dòng)態(tài)加載本地圖片問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue組寫一個(gè)組件,需要的朋友可以參考下2018-04-04
Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)
這篇文章主要介紹了Vue學(xué)習(xí)-VueRouter路由基礎(chǔ),路由本質(zhì)上就是超鏈接,xiamian?文章圍繞VueRouter路由的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了vue操作dom并為dom增加點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
單元測(cè)試是用來測(cè)試項(xiàng)目中的一個(gè)模塊的功能，本文主要介紹了前端Vue單元測(cè)試入門教程，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue實(shí)現(xiàn)全選組件封裝實(shí)例詳解
這篇文章主要介紹了vue?全選組件封裝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue如何使用rem適配，幫助大家處理vue開發(fā)移動(dòng)應(yīng)用時(shí)的兼容性問題，感興趣的朋友可以了解下2021-02-02
基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)
這篇文章主要介紹了基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng),需要的朋友可以參考下2017-12-12
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁放大鏡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue使用axios跨域請(qǐng)求數(shù)據(jù)問題詳解
這篇文章主要為大家詳細(xì)介紹了vue使用axios跨域請(qǐng)求數(shù)據(jù)的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10