首頁 >web前端 >H5教程 >v-for怎麼載入本機靜態圖片

v-for怎麼載入本機靜態圖片

php中世界最好的语言
php中世界最好的语言原創
2018-03-27 16:00:102062瀏覽

這次帶給大家v-for怎麼載入本地靜態圖片,v-for載入本地靜態圖片的注意事項有哪些,下面就是實戰案例,一起來看一下。

vue-cli 專案中本地圖片放在assets目錄下(原因vue-cli最開始的vue圖片就在裡面,就把所有圖片放在裡面了);

之後v-for 動態載入圖片路徑就遇到了問題

#原始碼:##

<ul>
<li v-for="(item,index) in teamInfo" @click="trastFun(item)">
<p><img v-bind:src="item.imageurl"/></p>
<p>{{item.name}}</p>
<p>{{item.position}}</p>
<p class="icon-vs">VS</p>
</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目錄下,可能就不會有這樣的問題,一開始就欠缺考慮了。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Vue.directive()的圖文詳情

Node.js爬取豆瓣資料實例
#

以上是v-for怎麼載入本機靜態圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn