[Vue]|[Vue] 实现图片src的动态绑定
【[Vue]|[Vue] 实现图片src的动态绑定】问题出现的场景，需要用v-for循环的方式批量创建图片。
这个时候如果使用src![[Vue]|[Vue] 实现图片src的动态绑定](https://img.it610.com/image/info9/9b7ce902f9a74dcda9cad4f654ed1821.jpg)
文章图片
![[Vue]|[Vue] 实现图片src的动态绑定](https://img.it610.com/image/info9/809109ef0ad04f0094ef8efa53ea4465.jpg)
文章图片
上面这种template 和 data 不能达到预期效果。
这是因为在webpack中会将图片图片来当做模块来用，因为模块是动态加载的，所以url-loader将无法解析图片地址。这时我们需要将图片作为模块加载进去，改用require()的方式。
![[Vue]|[Vue] 实现图片src的动态绑定](https://img.it610.com/image/info9/1e4422b922de4f7195bb7e206f70f92e.jpg)
文章图片
注：
直接在template中指定图片路径（下图的方式）没问题。但v-for的时候不可以，需要改用上面说的require引入。![[Vue]|[Vue] 实现图片src的动态绑定](https://img.it610.com/image/info9/e3dcd68ee82e4ae898de9f544c5b2c4e.jpg)
文章图片
同步更新到自己的语雀。
https://www.yuque.com/diracke...
