vue-cli 項目中本地圖片放在assets目錄下（原因vue-cli最開始的vue圖片就在里面，就把所有圖片放在里面了）；
之后v-for 動態加載圖片路徑就遇到了問題
源碼：
<ul><li v-for="(item,index) in teamInfo" @click="trastFun(item)"><div><img v-bind:src="item.imageurl"/></div><p>{{item.name}}</p><p>{{item.position}}</p><div class="icon-vs">VS</div></li></ul>for(var i = 0;i<self.teamInfo.length;i++){var j= i+1;self.teamInfo[i].imageurl = '../../assets/crop'+j+'.png';}結果發現瀏覽器中雖然img 的src 路徑加載出來.但圖片并未顯示，百度后發現是webpack打包解析為了字符串，而非真實路徑
改為
for(var i = 0;i<self.teamInfo.length;i++){var j= i+1;self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png');}當然如果一開始將靜態圖片放在static目錄下，可能就不會出現這樣的問題，一開始就欠缺考慮了。
以上這篇vue中v-for加載本地靜態圖片方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
