Vue中img标签src地址编译的问题？

Question

在App.vue文件中

<img src="./img/a.png">
<img data-src="./img/b.png">

在开发的时候查看浏览器发现他会被webpack编译为

<img src="/static/xxxx/a.d4fgr4eag.png">
<img data-src="./img/b.png">

请问如何让data-src中的图片地址也被webpack编译。
最好是直接能够通过修改webpack配置完成,而不是人为通过写代码完成。

Answer 1

webpack可以打包图片

import image from "path/to/image";

然后把src属性设为image就可以了

Answer 2

https://segmentfault.com/a/11...

Answer 3

默认img只对src会使用loader解析，可以通过修改webpack配置的方式实现也对data-src属性解析，
但更简单的方式是：<img :data-src="require('./assets/img/home.png')">