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