解決vue v-for src 圖片路徑問題 404
更新時(shí)間：2019年11月12日 17:56:08 作者：楓丿慕
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
我的代碼結(jié)構(gòu)如下所示不能執(zhí)行，會(huì)出現(xiàn)報(bào)錯(cuò)
<RadioGroup v-model="animal">
<Radio v-for='a in radio_arr' label={{a}}></Radio>
</RadioGroup>
export default {
data(){
return{
radio_arr:['循環(huán)1','循環(huán)2','循環(huán)3'],
animal:'循環(huán)2'
}
}
}
報(bào)錯(cuò)信息：
修改代碼如下： 修改內(nèi)容為 label={{a}} 修改為 ：label='a'
<RadioGroup v-model="animal">
<Radio v-for='a in radio_arr' :label='a'></Radio>
</RadioGroup>
export default {
data(){
return{
radio_arr:['循環(huán)1','循環(huán)2','循環(huán)3'],
animal:'循環(huán)2',
}
}
}
效果如下：
圖片添加src時(shí)：
第一種：
<img v-for='url in imgurl' :src='url' />
export default {
data(){
return{
imgurl:['../assets/img/icon1.png' ,
'../assets/img/icon2.png']
}
}
}
報(bào)錯(cuò)如下：
修改之后的代碼： 修改內(nèi)容為：
imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']
修改為
imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]
<img v-for='url in imgurl' :src='url' />
export default {
data(){
return{
imgurl:[require('../assets/img/icon1.png')
,require('../assets/img/icon2.png')]
}
}
}
結(jié)果為：
第二種:
當(dāng)我們需要在js代碼里面寫圖片路徑的時(shí)候，如果我們?cè)赿ata里面寫
/*錯(cuò)誤寫法*/ imgUrl:'../assets/logo.png'
此時(shí)webpack只會(huì)把它當(dāng)做字符串處理從而找不到圖片地址，此時(shí)我們可以使用import引入圖片路徑：
<img :src="avatar" /> import avatar from '@/assets/logo.png'
在data里面定義
avatar: avatar
第三種：
我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：
imgUrl ： '../../static/logo.png' <img :src="imgUrl" />
以上這篇解決vue v-for src 圖片路徑問題 404就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到
這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue2和vue3實(shí)現(xiàn)圖片懶加載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
vue axios post發(fā)送復(fù)雜對(duì)象問題
現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請(qǐng)求去后臺(tái)拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對(duì)象的一點(diǎn)思考,需要的朋友可以參考下2019-06-06
vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決(兩種解決方法)
這篇文章主要介紹了vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決，本文給大家分享兩種解決方法,需要的朋友可以參考下2023-05-05
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue?Validate表單組件的封裝的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下2023-09-09
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了Vue組件實(shí)現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文詳細(xì)介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機(jī)制,通過nextTick可以確保在DOM更新后執(zhí)行回調(diào),nextTick依賴微任務(wù)和宏任務(wù),優(yōu)先使用Promise,降級(jí)到MutationObserver/setTimeout,Vue3進(jìn)一步優(yōu)化了nextTick,減少了復(fù)雜度并提升了性能2025-02-02