CODEWITHSUNDEEP
javascriptwebpack
Mizok.H
Mizok.H

Reputation: 463

html-loader is not getting correct img src path

(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

enter image description here

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>

Upvotes: 4

Views: 3806

Answers (3)

Mizok.H
Mizok.H

Reputation: 463

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'
    })
  ]
}

Upvotes: 10

Ravikumar
Ravikumar

Reputation: 2205

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/'
        }
      }
    ],
  }

Upvotes: 1

Alen Vlahovljak
Alen Vlahovljak

Reputation: 574

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

Upvotes: 0

Related Questions