title: Webpack 5 How to display images in HTML file
body: <p>I use <code>webpack</code> for a small little application and so far it works pretty well, except that I have issues in displaying images - I get a 404.</p>
  <p>Here i my webpack config:</p>
  <pre><code>const path = require(&quot;path&quot;);
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  
  module.exports = {
     entry: {
       index: './src/index.js'
     },
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
     },
     module: {
      rules: [
          {
              test: /\.(sa|sc|c)ss$/,
              use: [
              MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true } },
                { loader: 'postcss-loader', options: { sourceMap: true } },
                { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true } },
              ]
          },
          {
              test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name: '[name].[ext]',
                    outputPath: 'src/assets/images'
                  }
                },
              ],
          },
          {
              test: /\.js$/i,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env'],
                },
              },
          },
          {
              // Extract any CSS content and minimize
              test: /\.css$/,
              use: [
                  MiniCssExtractPlugin.loader,
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  { loader: 'postcss-loader' }
              ]
          }  
        ]
     },
     plugins: [
        new HtmlWebpackPlugin({
          template: './dist/index.html',
          inject: 'body',
          chunks: ['index'],
          filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
          filename: 'src/css/[name].min.css'
       }),
    ],
    devServer: {
      watchContentBase: true,
      contentBase: path.resolve(__dirname, 'dist'),
      open: true
    }
  };
  </code></pre>
  <p>then in my index.html, I try to do this:</p>
  <pre><code>&lt;img class=&quot;object-cover z-0 w-full h-full&quot; src='/src/assets/images/top_image.png'&gt;
  </code></pre>
  <p>but like I mentioned before, I get 404...</p>
  <p>Can someone help me out?</p>