Espero que esto sea una solución rápida.

Objetivo: Quiero agregar imágenes a través de la URL en scss y, después de una compilación exitosa, verlas en dev-server localhost.

Problema: Puedo establecer una ruta absoluta y el paquete web no me da errores, las imágenes que incluí a través de la URL pasan correctamente por el cargador de archivos y se colocan en la carpeta '../dist' en '/ assets / images /'. Cuando después de la compilación "npm run dev" ejecuto dev-server para abrir un localhost, puedo realizar cambios en vivo con éxito en html, scss y js y se procesa sin problemas, ahora, el único problema es que algo acerca de las imágenes es incorrecto y, por lo tanto, las imágenes no se muestran.

Probé muchas soluciones para cambiar la ruta de manera diferente, en 'main.css' compilado, la ruta de la imagen es la misma que escribí en scss pero falta './' para tener una ruta correcta. Desafortunadamente, cuando intento agregar un punto delante de la dirección de la imagen url, aparece un error de compilación. Estoy atascado con este problema, realmente agradecería cualquier ayuda que me brinden.

Incluí varias capturas de pantalla:

https://i.stack.imgur.com/5AfzQ.png [Configuración del paquete web]

https://i.stack.imgur.com/loWQ8.png [cargador de archivos]

https://i.stack.imgur.com/CErdq.png [home.scss]

https://i.stack.imgur.com/qJfLz.png [index.js]

https://i.stack.imgur.com/6E1jt.png [HTML compilado y estructura de archivos a la izquierda]

https://i.stack.imgur.com/IPupt.png [localhost con algunos errores]

https://i.stack.imgur.com/eZwSZ.png [estructura de activos]

0
zippelgazz 21 ene. 2021 a las 21:12

1 respuesta

La mejor respuesta

Lo descubrí yo mismo, tuve que señalar una dirección correcta en el archivo webpack.config.js y, por lo tanto, mi configuración para el cargador de archivos es ahora:

        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images/',
              name: '[name].[ext]',
              url: true,
              publicPath: './assets/images/',
            }
        },
0
zippelgazz 31 ene. 2021 a las 18:37