0

I am using webpack 5 with html-loader, I have a problem, images src in html files not working.

first of all here is my project tree

dist => index.html

src => assets => images => logo.jfif

Here is my webpack.config.js code

    const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    static: './dist',
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/images/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|jfif)$/,
        type: 'asset/resource',
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread'],
          },
        },
      },
    ],
  },
};

and here is my img tag in index.html file

<img src="assets/images/logo.jfif"/>

Known that I am getting 404 Image not found

yasser Eltibili
  • 134
  • 2
  • 8
  • 1
    That's not how it works. You either a) put the images inside the dist folder and reference them like static files, i.e. `src="/images/logo.jfif"` (no webpack involved at all) or b) you `import logo from "./assets/images/logo.jfif"` then use `logo` as the src (which adds the images to the webpack build) –  Jun 02 '22 at 17:40

0 Answers0