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

使用require 将图片引入

Answer 6

static 目录试一下

Answer 7

需要引入图片

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

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