解決vue v-for src 圖片路徑問題 404
更新時間：2019年11月12日 17:56:08 作者：楓丿慕
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我的代碼結(jié)構(gòu)如下所示不能執(zhí)行，會出現(xiàn)報錯
<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'
}
}
}
報錯信息：
修改代碼如下： 修改內(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時：
第一種：
<img v-for='url in imgurl' :src='url' />
export default {
data(){
return{
imgurl:['../assets/img/icon1.png' ,
'../assets/img/icon2.png']
}
}
}
報錯如下：
修改之后的代碼： 修改內(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代碼里面寫圖片路徑的時候，如果我們在data里面寫
/*錯誤寫法*/ imgUrl:'../assets/logo.png'
此時webpack只會把它當(dāng)做字符串處理從而找不到圖片地址，此時我們可以使用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就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設(shè)置了一個展開按鈕,點擊該按鈕會顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了詳解express鑒權(quán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細(xì)的介紹一下2021-09-09
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
下面小編就為大家分享一篇Vue的elementUI實現(xiàn)自定義主題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02