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:[&nbsp; &nbsp; {imgurl: require('../../assets/banner0.jpg'), name:'3'},&nbsp; &nbsp; {imgurl: require('../../assets/banner1.jpg'), name:'1'},]

Answer 2

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

Answer 3

import image0 from '../../assets/banner0.jpg'import image1 from '../../assets/banner1.jpg'export default {&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;imgList:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {imgurl:image0, name:'3'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {imgurl:image1, name:'1'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 4

图片要放入static目录

Answer 5

使用require 将图片引入

Answer 6

static 目录试一下

Answer 7

需要引入图片import banner0 from '../../assets/banner0.jpg'import banner1 from '../../assets/banner1.jpg'