url-loader with Webpack 5. Images are not loaded

For a small front-end vanilla JS project, I am using Webpack 5. I will only have one HTML page with text and some small icons, so I would like to use url-loader for these icons.

I installed the necessary modules with this command:

npm install url-loader file-loader --save-dev

I configured the Webpack rule in the following way:

{
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'url-loader',
  options: {
    limit: 8192, // in bytes
    name: '[name].[hash:7].[ext]',
    fallback: 'file-loader',
    outputPath: 'images',
    publicPath: 'images',
  },
},

Finally, I added this image to the index.html page:

<img src="/images/image1.png" alt="Image 1">

Here's the structure of my src folder:

src/
├── index.html
└── images/
    ├── image1.jpg
    ├── image2.png
    └── image3.gif

It seems that the url-loader is not working because I am not able to see the images on the browser, and the HTML related to these images does not seem to have been changed. I am able to use other rules such as SCSS and i18next, but I'm not sure what the issue is with the images. Do you have any ideas?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/5hpkbGf