html中如何正确的引入图片供webpack编译？

问题缘由

在html模板页面中我们有时候要直接插入图片img。如果直接写绝对路径例如<img src="https://static.yidongtimes.com/dist/mobile/v2/img/notice/fishingTips/waiting.png" alt="">，页面可以访问到图片但是图片不经过webpack处理（压缩，添加哈希后缀等）。这样操作图片也不能作为资源一起编译处理到dist文件夹中。

提出问题

html中如何正确的引入图片供webpack编译？

解决办法

采用以下方式引入图片

<img src="${require(‘../../../../../../static_audio/src/mobile/v2/img/notice/fishingTips/waiting.png‘)}" alt="">

这样引入的图片可经过webpack处理

发现问题

按照上面的写法引入图片之后发现图片变成了<img src="[object Module]" alt="">,查找资料发现原来是file-loader版本过高导致的

解决办法

安装特定版本的file-loader,这里我安装的是4.2.0

yarn add file-loader@4.2.0

参考资料
webpack踩坑记录

html中如何正确的引入图片供webpack编译？

原文：https://www.cnblogs.com/jesse131/p/12884126.html