解決vue v-for src 圖片路徑問題 404

更新時間：2019年11月12日 17:56:08 作者：楓丿慕

今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我的代碼結構如下所示不能執(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')]
    }
  }
}

結果為：

第二種:

當我們需要在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就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue前端框架—Mint UI詳解（更適用于移動端）
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue和react中props變化后如何修改state
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設置了一個展開按鈕,點擊該按鈕會顯示與當前行關聯(lián)的子表格內(nèi)容,感興趣的可以了解一下
2024-01-01
Vue express鑒權零基礎入門
這篇文章主要介紹了詳解express鑒權，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
Element表格表頭行高問題解決
在最近一個項目的后臺管理系統(tǒng)中，寫前端界面時用到了ElementUI，但是發(fā)現(xiàn)導入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來詳細的介紹一下
2021-09-09
vue中怎樣讓函數(shù)只執(zhí)行一次
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue的elementUI實現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實現(xiàn)自定義主題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02