vue中v-for載入本機靜態圖片方法

以下為大家分享一篇vue中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 = &#39;../../assets/crop&#39;+j+&#39;.png&#39;;
}

結果發現瀏覽器中雖然img 的src 路徑加載出來.但圖片並未顯示，百度後發現是webpack打包解析為了字符串，而非真實路徑

改為

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require(&#39;../../assets/crop&#39;+j+&#39;.png&#39;);
}

當然如果一開始將靜態圖片放在static目錄下，可能就不會出現這樣的問題，一開始就欠缺考慮了。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

使用Vue動態產生form表單的介紹

vue 實作剪裁圖片並上傳伺服器的功能介紹

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