Estoy usando Webpack e intento usar una imagen png para que se muestre en mi navegador Firefox. El problema es que Webpack crea dos imágenes en la carpeta dist, una de ellas probablemente tiene un error y no se puede mostrar ni en mi computadora portátil ni en el navegador ("Ocurrió un error al cargar la imagen") y Webpack intenta usarla y no otro que debería funcionar.
Mi webpack.config.js tiene los siguientes módulos:
module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(jpe?g|png|gif|svg)$/, use: ['file-loader'] } ] }En estilos.css utilicé la imagen de fondo:
.logo { background-image: url('../assets/foto.png'); background-size: cover; height: 200px; width: 200px; margin: 0 auto;}En index.html utilizo un contenedor div:
<div class="logo"></div>Aquí está la estructura de mi proyecto:
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.jsVersiones :
Supongo que hay un problema con la ruta a la foto.png, pero no pude averiguar cómo puedo solucionarlo. Las rutas absolutas y relativas no funcionaron.
¿Por qué Webpack crea dos imágenes en la carpeta dist y usa la que está rota? ¿Qué estoy haciendo mal?
Resolví el problema usando módulos de activos en lugar de url-loader y file-loader. Así que el código se ve así:
{ test: /\.(jpe?g|png|gif|svg)$/, type: 'asset/resource' }