When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'

问题

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

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

The webpack.config.js is like this :

   // 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 cant figure out what the issue...

回答1:

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 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.

Sources:

• file-loader release history
• relevant github issue

来源：https://stackoverflow.com/questions/59114479/when-i-using-file-loader-and-html-loader-in-webpack-the-src-attr-of-image-gonna