vue图片不渲染问题

vue图片不渲染问题

//今天写图片渲染的时候发现一个问题就是，图片没显示出来，于是就找了一下原因
//这是渲染内容的循环
 <img v-for="(item,index) in listData" :src="item.src" alt="">
//先看一下错误写法：
data() {
      return {
        listData: [{
           src: "../assets/img/machine26.png",
        }, {
          src: "../assets/img/machine26.png",
        }, {
          src: "../assets/img/machine26.png",
        }, {
           src: "../assets/img/machine26.png",
        }]
      }
    },
//我们如果是上面的写法那就错了，那样写图片不会显示的
//下面才是正确写法：  
data() {
      return {
        listData: [{
          src: require("@/assets/img/machine26.png"),

        }, {
          src: require("@/assets/img/machine26.png"),
        }, {
          src: require("@/assets/img/machine26.png"),
        }, {
          src: require("@/assets/img/machine26.png"),
        }]
      }
    },
//在补充一点@，@他是可以在我们的  webpack.base.conf.js文件下面配置的，他所对应的就是
 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), //这里就是配置映射路径的，src就是指的外部src目录文件，这里的是默认的，我们也可以自己修改
      '#': resolve('src/assets'),//我这里重新添加了一个映射路径
    }
  },