When using file-loader and html-loader in webpack the src attr of image is '[object Module]'

Question

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

The webpack.config.js is 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 can't figure out what the issue is...

Sorry. i am gonna update my question.And im doing like this : — Nelson, Nov 30 '19 at 08:36

score 29 · Accepted Answer · answered Nov 30 '19 at 11:16

29

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:

answered Nov 30 '19 at 11:16

MrSegFaulty

535
6
10

Thank you so much. I've been losing my mind trying to figure out why the other answers would not work. – Cale McCollough Feb 05 '23 at 22:58

score 3 · Answer 2 · edited Feb 27 '20 at 13:52

3

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},

edited Feb 27 '20 at 13:52

M Hamza Javed

1,269
4
17
31

answered Feb 27 '20 at 11:30

ali

31
1

score 3 · Answer 3 · answered Apr 16 '21 at 14:38

If you're lazy, you can manually access the image path from that Module object by way of the default property:

const imgPath = require('path/to/img.jpg').default;

That'll give you the image's exact path after it's been prepped for distribution, eg:

/images/logo-192.png?88bf116f524693c599897adae2bb688b

If you're using a framework like Vue, you can just pop it straight into the src attribute:

<img :src="require('path/to/img.jpg').default">

When using file-loader and html-loader in webpack the src attr of image is '[object Module]'

3 Answers3

Linked