快捷導(dǎo)航

vue中v-for加載本地靜態(tài)圖片方法

更新時(shí)間：2018年03月03日 15:42:34 作者：Sophiego

下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue-cli 項(xiàng)目中本地圖片放在assets目錄下（原因vue-cli最開(kāi)始的vue圖片就在里面，就把所有圖片放在里面了）；

之后v-for 動(dòng)態(tài)加載圖片路徑就遇到了問(wèn)題

源碼：

<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';
}

結(jié)果發(fā)現(xiàn)瀏覽器中雖然img 的src 路徑加載出來(lái).但圖片并未顯示，百度后發(fā)現(xiàn)是webpack打包解析為了字符串，而非真實(shí)路徑

改為

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

當(dāng)然如果一開(kāi)始將靜態(tài)圖片放在static目錄下，可能就不會(huì)出現(xiàn)這樣的問(wèn)題，一開(kāi)始就欠缺考慮了。

以上這篇vue中v-for加載本地靜態(tài)圖片方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫(xiě)方式,OptionsAPI通過(guò)對(duì)象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過(guò)data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧
2024-10-10
如何正確快速使用Vue中的插槽和配置代理
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識(shí),插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下
2023-01-01
Vue $mount實(shí)戰(zhàn)之實(shí)現(xiàn)消息彈窗組件
這篇文章主要介紹了Vue $mount實(shí)現(xiàn)消息彈窗組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
vue2.0.js的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue2.0.js的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue中子組件的顯示與隱藏方式
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
詳解vue模擬加載更多功能（數(shù)據(jù)追加）
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法
這篇文章主要介紹了Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的操作方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
Vue3中使用Element?Plus時(shí)el-icon無(wú)法顯示的問(wèn)題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時(shí)el-icon無(wú)法顯示的問(wèn)題解決,需要的朋友可以參考下
2022-03-03
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)傳參的4種方式
本文詳盡的講了在Vue項(xiàng)目中,如何實(shí)現(xiàn)路由跳轉(zhuǎn)傳參的4四種方式（2大路由跳轉(zhuǎn)方式,每種方式包括4種路由傳參實(shí)現(xiàn)形式）,以及每種方式中實(shí)現(xiàn)路由跳轉(zhuǎn)包括路由傳參的方法的各種寫(xiě)法,需要的朋友可以參考下
2024-04-04