webpack：url-loader打包img后src为[object Module]

引入图片的方式

<!-- 相对路径引入 -->
<img src="./logo.jpg" alt="">

<!-- 绝对路径引入 -->
<img src="@/assets/logo.jpg" alt="">

<!-- 引入static文件, 不会处理 -->
<img src="/static/logo.jpg" alt="">

webapck 配置文件

{
  test: /\.(jpg|png|gif|jpeg|woff|ttf)$/,
   use: [
     {
       loader: 'url-loader',
       options: {
         esModule: false, // 这里设置为false
         // 如果图片大小小于这个值，就会被打包为base64格式
         limit: 10 * 1000, // 10 kb
         name: 'img/[name].[hash].[ext]',
       },
     },
   ],
 },

遇到的问题

打包产物中出现了[object Module]

<img src="[object Module]" alt="">

原因是新版本的file-loader选项esModule默认为true ,需要将其设置为false

参考
webpack打包html里面img后src为“[object Module]”问题