使用webpack打包时图片路径问题

webpack打包时会分析图片的src路径，在打包相应图片的同时，修改图片的src路径为打包后图片的位置。

因此，如果使用v-bind绑定图片路径：

![](`../assets/carousel${i}.jpg`)

实际上直到vue编译后src才是正常的，webpack不懂得从这个路径去打包图片，于是打开网页时：
图片的实际路径为

http://localhost:8080/static/img/carousel3.d538dbe.jpg

但html中图片设定的路径为

http://localhost:8080/assets/carousel3.jpg

结果就是根本无法显示图片。

解决方法是在data里对图片进行require打包，然后绑定到图片的src上。

  data () {
    return {
      imgPaths: []
    }
  },
  created: function () {
    for (let i = 1; i <= this.amount; ++i) {
      this.imgPaths.push(require(`../assets/carousel${i}.jpg`))
    }
  }

![](imgPaths[i])