溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue-cli 項目中本地圖片放在assets目錄下（原因vue-cli最開始的vue圖片就在里面，就把所有圖片放在里面了）；
之后v-for 動態(tài)加載圖片路徑就遇到了問題
源碼：
<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';
}
結果發(fā)現(xiàn)瀏覽器中雖然img 的src 路徑加載出來.但圖片并未顯示，百度后發(fā)現(xiàn)是webpack打包解析為了字符串，而非真實路徑
改為
for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png');
}
當然如果一開始將靜態(tài)圖片放在static目錄下，可能就不會出現(xiàn)這樣的問題，一開始就欠缺考慮了。
以上這篇vue中v-for加載本地靜態(tài)圖片方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
