溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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加載本地靜態圖片方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
