在vue中v-for迴圈遍歷圖片不顯示錯誤的解決方案
阿新 • • 發佈:2022-01-25
目錄
- v-for迴圈遍歷圖片不顯示錯誤
- 錯誤
- 本地圖片路徑正確,但for迴圈不顯示
- 經過改正加個require()就可以顯示了
v-for迴圈遍歷圖片不顯示錯誤
<template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i) of imgs" :key="i" class="carousel-item" :style="{width:innerWidth} + 'px' "> <img :src="img.src" :style="{width:innerWidth} + 'px' "> </div> </div> </div> </template> <script> export default{ data(){ return{ innerWidth:window.innerWidth,i:0,imgs:[ {src:"/img/20200908111741.jpg"},{src:"/img/20200908111804.jpg"},{src:"/img/2020101客棧3163954.jpg"},] } } } <script>
錯誤
之前圖片存放的地址是…/assets/avatar/
將圖片放在靜態資源public目錄下,建立一個img目錄
然後直接從跟開始獲取 /代表從跟獲取
vue本地圖片路徑正確,但for迴圈不顯示
今天for迴圈圖片的時候,發現圖片不顯示,以下是程式碼
<div v-for="(item,index) in img"> <img :src="item.imc" width="80" height="80"></img> </div>
img:[{imc:'./ww.png'},{name:'./imc.png'}],
看了看程式碼路徑也是正確的,而且單個是能顯示的,可for迴圈之後圖片就顯示不出來了
最後發現單個顯示的跟for迴圈顯示的圖片路徑不一樣
http://www.cppcns.com經過改正加個require()就可以顯示了
<div v-for="(item,index) in img"> <img :src="item.imc" width="80" height="80"></img> </div>
img:[{imc:require('./ww.png')},{imc:require('./ww.png')}],
以KyPewBmo上為個人經驗,希望能給大家一個參考,也希望大家多多支援我們。