首頁 > web前端 > js教程 > 主體

透過vue中v-for實作載入本機靜態圖片方法(詳細教學)

亚连
發布: 2018-06-01 15:28:47
原創
3300 人瀏覽過

下面我就為大家分享一篇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;);
}
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

vue專案關閉eslint校驗


#JS實作遍歷不規則多維數組的方法


JS實作為動態新增的元素增加事件功能範例


以上是透過vue中v-for實作載入本機靜態圖片方法(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板