CODEWITHSUNDEEP
webpackhtml-webpack-pluginwebpack-html-loader
Slava Fomin II
Slava Fomin II

Reputation: 28661

Image's src attribute equals "[object Object]" when processed by Webpack

I'm using Webpack to process HTML and assets, here's the minimal webpack.config.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const OUTPUT_DIR = __dirname + '/dist';

module.exports = {
  context: __dirname + '/src',
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin([
      OUTPUT_DIR
    ]),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  output: {
    filename: '[name].js',
    path: OUTPUT_DIR,
    publicPath: '/'
  }
};

My source index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Example Web Page</title>

</head>

<body>

  <img src="image.jpg">

</body>

</html>

The problem is that in the final HTML document the image tag looks like this: <img src="[object Object]">.

I'm using html-webpack-plugin to generate the output HTML using my source HTML document as a template, which is loaded using html-loader.

The image is actually added to the output directory.

I'm not sure what am I doing wrong?

Upvotes: 0

Views: 1308

Answers (2)

Owamamwen
Owamamwen

Reputation: 61

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

Upvotes: 1

Slava Fomin II
Slava Fomin II

Reputation: 28661

Nevermind. After upgrading the dependencies (I'm using yarn for it: yarn upgrade) the problem gone away. This is a second bug in Webpack ecosystem during this weekend (crazy).

Upvotes: 0

Related Questions