vue项目中用v-for 循环本地图片， 图片不显示，这是什么原因呢

Question

vue项目中用v-for 循环本地图片， 图片不显示。p标签中可以打印出完整的路径但是图片就是不显示，显示如下图

<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'},
   ]
}

},
}

Answer 1

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

Answer 2

<img v-bind:src="require(item.imgurl)">

Answer 3

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'},
           ]
        }
    }
}

Answer 4

图片要放入static目录

Answer 5

你这个应该是文件路径的问题，你F12看看图片是不是404了？至少现在看，你vue的写法是没有问题的

Answer 6

使用require 将图片引入

Answer 7

这个可能跟你的配置有关系，看看publicpath的配置了，肯定是路径的问题，可以采用require，走的就是loader那一套东西了，如果不用require，那走的肯定就是静态资源了，你需要在你的配置文件中指定静态文件的目录

Answer 8

static 目录试一下

Answer 9

需要引入图片

import banner0 from '../../assets/banner0.jpg'
import banner1 from '../../assets/banner1.jpg'

Answer 10

循环输出的话 得加一个v-bind:src='xxxx' 然后再用require