快捷導(dǎo)航

解決vue v-for src 圖片路徑問(wèn)題 404

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

今天小編就為大家分享一篇解決vue v-for src 圖片路徑問(wèn)題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我的代碼結(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代碼里面寫(xiě)圖片路徑的時(shí)候，如果我們?cè)赿ata里面寫(xiě)

/*錯(cuò)誤寫(xiě)法*/
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 圖片路徑問(wèn)題 404就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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