html-loader is not getting correct img src path

Question

(problem solved!)

I am trying to use html-loader and file-loader to pack my image source which is mentioned in index.html img tag src attribute.

But it's not working because the img tag src is not refering to the correct path.

Just want to know is there anything wrong within my config?

my webpack config:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/index.js', './src/scss/main.scss'],
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].min.js',
    path: resolve(__dirname, 'build'),

  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '/img/',
              pubicPath: '/img/'
            }
          }
        ],
      }


    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

./build folder after run webpack

my index.html (I also tried to change the img src attribute to "./img/women.jpg" or "/img/women.jpg" or "img/women.jpg", but nothing work but just make webpack compiling error..)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="./src/img/women.jpg" alt="">
</body>

</html>

built index.html in ./build folder (so what is this 620b11833eb3b1be1f33.jpg?)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script defer src="main.js"></script></head>

<body>
  <img src="620b11833eb3b1be1f33.jpg" alt="">
</body>

</html>

I think you encountered same problem as I did, [here](https://stackoverflow.com/questions/66907267/webpack-file-loader-duplicates-files) is my SO question. — Daweed, Apr 25 '21 at 07:54
@Daweed I tried your solution. and it did work on my img src, but it failed when compiling scss background-image url.. — Mizok.H, Apr 25 '21 at 08:21
@Daweed But I guess you are right, It seems there is some config setting that I have to add for background-image url compiling. — Mizok.H, Apr 25 '21 at 08:22
@Daweed I tried to follow guide in here: https://webpack.js.org/guides/asset-modules/ and everything works like charm :DD. Thank you very much ! — Mizok.H, Apr 25 '21 at 08:42

Mizok.H · Accepted Answer · 2021-04-25T09:47:59.953

Finally I found the solution.

I guess the error is caused by the problem which is mentioned by @Daweed in the top comment.

I am using webpack 5 but didn't notice that file-loader/url-loader/raw-loader is deprecated now.

The solution is to uninstall file-loader/url-loader/raw-loader from dev-dependency(and remember also remove all related config setting.),and follow the guides here.

my config setting now(which solved all problems) is below:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/index.js', './src/scss/main.scss'],
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].min.js',
    path: resolve(__dirname, 'build'),

  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[hash][ext]'
        }
      }


    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

score 1 · Answer 2 · answered Apr 25 '21 at 08:44

Looks there is a conflict between file-loader and html-loader plugins, thus it's generating corrupted assets.

However, html-loader will take care of loading all the images (supported sources), we don't need additional plugin file-loader to have that support.

So you can try just by removing file-loader configuration

  {
    test: /\.(jpg|png|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: '/img/',
          pubicPath: '/img/'
        }
      }
    ],
  }

score 0 · Answer 3 · answered Apr 25 '21 at 07:37

0

Can you try to create a public folder in the root project folder and place your images there in the img folder (for example). I think that should work out of the box without any configuration. Then refer to image as img/women.jpg

answered Apr 25 '21 at 07:37

Alen Vlahovljak

542
3
16

should I remove any config setting ? I tried tp create a public folder in root and changed the img src , but it just make the compile error :( – Mizok.H Apr 25 '21 at 07:41
I leave my github testing repo at the top , maybe you can try it. – Mizok.H Apr 25 '21 at 07:45
2

@Mizok.H Can you check [this](https://stackoverflow.com/questions/45578665/push-assets-folder-to-public-directory-with-webpack) answer first? If don't work, I'll try to find the solution on my own. – Alen Vlahovljak Apr 25 '21 at 08:06

html-loader is not getting correct img src path

3 Answers3