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])