鍍金池/ 問(wèn)答/HTML/ vue項(xiàng)目中用v-for 循環(huán)本地圖片， 圖片不顯示，這是什么原因呢

vue項(xiàng)目中用v-for 循環(huán)本地圖片， 圖片不顯示，這是什么原因呢

vue項(xiàng)目中用v-for 循環(huán)本地圖片， 圖片不顯示。p標(biāo)簽中可以打印出完整的路徑但是圖片就是不顯示，顯示如下圖

<el-carousel-item v-for="(item, index) in imgList" :key="index">

       <p>{{item.imgurl}}</p>
       <img v-bind:src="item.imgurl">

</el-carousel-item>

export default {
name: 'index',
data(){

return{
   imgList:[
    {imgurl:'../../assets/banner0.jpg',name:'3'},
    {imgurl:'../../assets/banner1.jpg',name:'1'},
   ]
}

},
}

clipboard.png

回答
編輯回答
替身

static 目錄試一下

2017年9月28日 11:17
編輯回答
不歸路

你這個(gè)應(yīng)該是文件路徑的問(wèn)題，你F12看看圖片是不是404了？至少現(xiàn)在看，你vue的寫法是沒(méi)有問(wèn)題的

2017年3月6日 15:21
編輯回答
旖襯

使用require 將圖片引入

2018年4月10日 07:33
編輯回答
維她命

圖片要放入static目錄

2017年9月4日 03:53
編輯回答
無(wú)標(biāo)題

循環(huán)輸出的話 得加一個(gè)v-bind:src='xxxx' 然后再用require

2018年4月27日 05:22
編輯回答
苦妄

這個(gè)可能跟你的配置有關(guān)系，看看publicpath的配置了，肯定是路徑的問(wèn)題，可以采用require，走的就是loader那一套東西了，如果不用require，那走的肯定就是靜態(tài)資源了，你需要在你的配置文件中指定靜態(tài)文件的目錄

2018年8月11日 15:10
編輯回答
互擼娃

需要引入圖片

import banner0 from '../../assets/banner0.jpg'
import banner1 from '../../assets/banner1.jpg'
2017年11月27日 16:50
編輯回答
巫婆
<img v-bind:src="require(item.imgurl)">
2017年6月10日 10:47
編輯回答
司令
imgList:[
    {imgurl: require('../../assets/banner0.jpg'), name:'3'},
    {imgurl: require('../../assets/banner1.jpg'), name:'1'},
]
2018年1月20日 10:10
編輯回答
故林
import image0 from '../../assets/banner0.jpg'
import image1 from '../../assets/banner1.jpg'

export default {
    data() {
        return{
           imgList:[
            {imgurl:image0, name:'3'},
            {imgurl:image1, name:'1'},
           ]
        }
    }
}
2017年11月19日 22:24