溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我的代碼結構如下所示不能執行，會出現報錯
<RadioGroup v-model="animal">
<Radio v-for='a in radio_arr' label={{a}}></Radio>
</RadioGroup>
export default {
data(){
return{
radio_arr:['循環1','循環2','循環3'],
animal:'循環2'
}
}
}
報錯信息：
修改代碼如下： 修改內容為 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:['循環1','循環2','循環3'],
animal:'循環2',
}
}
}
效果如下：
圖片添加src時：
第一種：
<img v-for='url in imgurl' :src='url' />
export default {
data(){
return{
imgurl:['../assets/img/icon1.png' ,
'../assets/img/icon2.png']
}
}
}
報錯如下：
修改之后的代碼： 修改內容為：
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')]
}
}
}
結果為：
第二種:
當我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫
/*錯誤寫法*/ imgUrl:'../assets/logo.png'
此時webpack只會把它當做字符串處理從而找不到圖片地址，此時我們可以使用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就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
