url-loader with Webpack 5. Images are not loaded

Question

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?

Per Quested Aronsson · Answer 1 · 2023-03-28T20:27:09.387

url-loader and file-loader are deprecated in Webpack 5 and replaced by asset modules. See https://webpack.js.org/guides/asset-modules/.

I had this issue with fonts, but it can be applied to images too. In my case it was enough to replace

test: /\.(woff|woff2|ttf|eot)/,
use: [
  {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'fonts/[name].[ext]' 
    }
  }
]

by

test: /\.(woff|woff2|ttf|eot)/,
type: 'asset/resource',
generator: {
  filename: './fonts/[name][ext]'
}

in webpack config.

Loaders that are used with url-loader or file-loader (example: @svgr/webpack in Create React App) might still need them. new-url-loader provides the functionality of both url-loader and file-loader using asset modules and URL assets. See for example https://github.com/marella/new-url-loader. Disclaimer: I have not yet tested this option myself.

score 0 · Answer 2 · answered Mar 22 '23 at 20:42

Based on the configuration you have provided, it seems that you have correctly set up the url-loader rule for images in your Webpack configuration file. However, there might be a problem with the paths that you are using to reference the images in your HTML file.

When you use the publicPath option in the url-loader configuration, it sets the URL path for the images that the loader is processing. In your case, you have set the publicPath option to 'images'. This means that the URL path for your images should be '/images/'.

However, in your HTML file, you have set the src attribute of your tag to '/images/image1.png'. This path is an absolute path, which means that it starts at the root directory of your website. Since your website is running on a local server, this path is not valid and might be the reason why your images are not displaying.

To fix this issue, you can change the src attribute of your <img> tag to a relative path that starts from the root of your website. In your case, you can use the following path: './images/image1.png'.

Here's how your updated HTML code should look like:

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

Yes, I also tried using ./images but the result seems the same. But, if I understand correctly, my expectation was also to have the base64 data for the images that are lower then the size that I specified into the Webpack config. — Safari, Mar 22 '23 at 21:12
One additional note also.. If I try to run the build command for production I don't see any images folder into the "dist" generated folder. — Safari, Mar 22 '23 at 21:25

url-loader with Webpack 5. Images are not loaded

2 Answers2