vue中v-for加載本地靜態(tài)圖片方法
更新時(shí)間：2018年03月03日 15:42:34 作者：Sophiego
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue-cli 項(xiàng)目中本地圖片放在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';
}
結(jié)果發(fā)現(xiàn)瀏覽器中雖然img 的src 路徑加載出來.但圖片并未顯示，百度后發(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)然如果一開始將靜態(tài)圖片放在static目錄下，可能就不會出現(xiàn)這樣的問題，一開始就欠缺考慮了。
以上這篇vue中v-for加載本地靜態(tài)圖片方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3導(dǎo)入Elementplus時(shí)組件無法加載的情況及解決
這篇文章主要介紹了Vue3導(dǎo)入Elementplus時(shí)組件無法加載的情況及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助2024-03-03
關(guān)于vue狀態(tài)過渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
本文主要介紹了vue單頁面改造多頁面應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無法使用Webpack別名的問題
這篇文章主要介紹了解決Idea、WebStorm下使用Vue cli腳手架項(xiàng)目無法使用Webpack別名的問題,需要的朋友可以參考下2019-10-10
Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期2022-10-10
這篇文章主要介紹了vue.js+element 默認(rèn)提示中英文實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Element-UI的el-table組件是一個(gè)非常強(qiáng)大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下2024-05-05
moment.js是一款現(xiàn)在對時(shí)間處理的強(qiáng)大的函數(shù)，這篇文章主要介紹了Vue?日期獲取的示例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01