在Webpack中使用文件加载器和HTML加载器时，图片的src属性为'[object Module]' [英] When using file-loader and html-loader in webpack the src attr of image is '[object Module]'

问题描述

我正在从头开始使用webpack4做一个项目.但是，当我尝试在HTML文件中显示图像时，我遇到了一个奇怪的问题: 在npm run build之后，图像标签的src被构建为<image src="[object Module]". HTML部分是:

I am doing a project with webpack4 from scratch. But when I try to display an image in an HTML file, I face a weird problem: After npm run build, the src of image tag is built as <image src="[object Module]". The HTML part is:

<img src="images/main_background.jpg">

webpack.config.js是这个:

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }

以及这两个加载程序的版本:

And the version of these two loaders:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

我不知道是什么问题...

I can't figure out what the issue is...

推荐答案

尝试向文件加载器添加esModule: false选项，如下所示:

Try adding esModule: false option to file-loader like so:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

同样适用于网址加载器.

Same applies to url-loader.

esModule选项已在4.3.0版本的文件加载器中引入，而在5.0.0版本中，默认情况下已将其设置为true，这可能是一个重大更改.

esModule option has been introduced in file-loader in version 4.3.0 and in 5.0.0 it has been set to true by default which can be a breaking change.

来源:

• 文件加载器的发布历史记录
• 相关的github问题

• file-loader release history
• relevant github issue

这篇关于在Webpack中使用文件加载器和HTML加载器时，图片的src属性为'[object Module]'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！