I'm currently working with Webpack and attempting to display a png image in my Firefox browser. The issue I'm facing is that when Webpack compiles, it generates two images in the dist folder. One of these images seems to have an error as it won't display on either my laptop or in the browser ("An error occurred while loading the image"). Strangely, Webpack is trying to use this faulty image instead of another one that should work properly.
Looking at my webpack.config.js file, I have the following modules set up:
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: ['file-loader']
}
]
}
In my styles.css file, I have specified the background-image like so:
.logo {
background-image: url('../assets/foto.png');
background-size: cover;
height: 200px;
width: 200px;
margin: 0 auto;}
Within my index.html file, I am utilizing a div container:
<div class="logo"></div>
Here's how my project structure looks like:
dist/
- h74g3ffgf3ff34h76.png
- analytics.54t54gg4.js
- ab0d12j489gh4igh8.png
- index.html
- main.h74rg34u73f.js
src/
assets/
- foto.png
styles/
- styles.css
- analytics.js
- index.html
- script.js
- package-lock.json
- package.json
- webpack.config.js
Versions:
- Webpack: 5.53.0
- css-loader: 6.3.0
- file-loader: 6.2.0
It seems that there might be an issue with the path to the foto.png file, but I haven't been able to pinpoint how to resolve it. Both absolute and relative paths have not worked for me so far.
Why does Webpack generate two images in the dist folder and favor the one that is defective? What could be causing this unexpected behavior?