Estoy usando reaccionar para mi aplicación. Tengo un div que me gustaría tener una imagen de fondo. Pero no puedo hacer que se muestre.
Cuando lo incluyo en la carpeta src como myapp/src/bgimage.png , funciona perfectamente, pero he oído que debería incluirlo en una carpeta llamada images en el nivel raíz, por lo que es myapp/images/bgimage.png , sin embargo, esto no me funciona y me da:
Intentó importar ../images/bgimage.png que se encuentra fuera del directorio src/ del proyecto.'
¿Alguien puede decirme la forma correcta de incluir activos de imagen en reactJS?
público: cualquier cosa que no sea utilizada por su aplicación cuando se compila
src: todo lo que se usa cuando se compila la aplicación
Entonces, por ejemplo, si usa una imagen dentro de un componente, debería estar en la carpeta src, pero si tiene una imagen fuera de la aplicación (es decir, favicon), debería estar en público.
Agregaría que crear una carpeta de "activos" dentro de la carpeta "src" es una buena práctica.
/src si está usando create-react-app Si está utilizando create-react-app , debe usar /src para obtener los siguientes beneficios .
- Los scripts y las hojas de estilo se minimizan y se agrupan para evitar solicitudes de red adicionales.
- Los archivos que faltan provocan errores de compilación en lugar de errores 404 para sus usuarios.
- Los nombres de los archivos de resultados incluyen hashes de contenido para que no tenga que preocuparse de que los navegadores almacenen en caché sus versiones anteriores.
Además, si está utilizando el paquete de activos de webpack de todos modos, sus archivos en /src se reconstruirán.
Puede crear subdirectorios dentro de src. Para reconstrucciones más rápidas, solo los archivos dentro de src son procesados por webpack. Debe colocar los archivos JS y CSS dentro de src; de lo contrario, el paquete web no los verá.
Ver este enlace