I am using webpack and simply trying to apply a background-image specified in a url property to an html element.

I've looked at several threads (

However, when I try to reach that url, all I see is a little white square ...

This is definitely not the image. I do find the image present in my build in ./dist/static/public/images/my-background.jpg

Note that the image has a large size : 3842 × 2162

I think this has to do with webpack loader configuration, but did not quite find how to adjust it to get it to work here. Any help would be very appreciated !

CodePudding user response：

You are may be using a new version of Webpack, where url-loader and file-loader are deprecated and Asset Modules are the alternatives.

Try using:

{
      test: /\.(jpg|png|svg|gif)$/,
      type: 'asset/resource',
},

instead.

For more information click here.