Reaccionar la ruta a la carpeta pública en la imagen de fondo css

3 minutos de lectura

Avatar de usuario de Freestyle09
estilo libre09

Estoy usando Create-React-App y quiero agregar una imagen de fondo para mi sección de encabezado y lo estoy haciendo de esa manera:

background-image: url('~/Screenshot_11.png');

Después de esto estoy recibiendo este error:

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref–6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!. /node_modules/sass-loader/lib/loader.js??ref–6-oneOf-5-3!./src/styles/main.scss) Módulo no encontrado: intentó importar ../../. ./../../../../Screenshot_11.png que queda fuera del directorio src/ del proyecto. No se admiten las importaciones relativas fuera de src/.

Configuré la página de inicio en package.json

"homepage": "http://localhost:3000",

En mis proyectos anteriores eso funciona pero hoy no puedo importar esto correctamente.

  • ~ generalmente apunta a la ubicación predeterminada en su sistema operativo (creo). Has probado esto: background-image: url('./Screenshot_11.png');

    – Johnatan Brown

    19 de julio de 2019 a las 11:09

  • no funciona tambien

    – Estilo libre09

    19 de julio de 2019 a las 11:22

Avatar de usuario de Freestyle09
estilo libre09

Han cambiado eso, pero no sé por qué. Ruta de trabajo:

background-image: url('/Screenshot_11.png');

EDITAR 2021

Para la gente que piensa que no funciona:

https://codesandbox.io/s/agitated-turing-gsnr3

  • Esto todavía no me funciona con imágenes en la carpeta pública.

    – James Huberto

    15 de diciembre de 2020 a las 15:36

  • Debe mirar dentro de la pestaña Red en las herramientas del desarrollador y ver qué ruta está solicitando, tal vez eso lo ayude.

    – Estilo libre09

    16 de diciembre de 2020 a las 8:02

  • Para aquellos como yo que luchan por hacer que su CSS en la carpeta SRC funcione con sus imágenes en la carpeta PÚBLICA, consulte la explicación detrás de la recomendación de mover las imágenes a la carpeta SRC aquí. github.com/facebook/create-react-app/issues/… Como se explica en el enlace, “No debería necesitar imágenes en público; el proceso de compilación copiará las imágenes de src/ a build/ en el momento de la compilación (y actualizará las rutas en consecuencia)”.

    – Joseph

    6 de marzo de 2021 a las 19:56

  • @JamesHubert, envíenos un ejemplo cuando esto no funcione

    – Estilo libre09

    24 de marzo de 2021 a las 7:40

puedes importar esa imagen como

import Background from './Screenshot_11.png'

y use

background-image: `url(${Background})`

  • Me ayudó con react-scripts v4 y styled-components. Gracias.

    – El Anónimo

    19 de abril de 2021 a las 10:43

avatar de usuario de zpetukhov
zpetukhov

Esto todavía no me funciona con imágenes en la carpeta pública.

ACTUALIZADO 19 marzo 2021

Con respecto al uso de en archivos .css.

Parece ser un cambio importante (¿se considerará un error?) en el paquete create-react-app (react-scripts) v4.x.
Y más precisamente en el paquete ‘css-loader’ v4.x.
La rama 3.x funciona bien con eso.

Aquí está el problema correspondiente en el repositorio de github:
https://github.com/facebook/create-react-app/issues/9870

(y hay pocos más en realidad).

Sin arreglos (todavía). (¿estarán?..)
Pero algunas soluciones mencionadas allí. Cuál usar… depende de tu proyecto, supongo.

Algunas de las soluciones:

  • degradar a react-scripts 3.4.x

  • no use url en archivos CSS 🙂 aún puede usar en .JSX (estilos en línea). O poner en .html. Obviamente, css-loader no los procesa.

  • reconfigure webpack para agregar url:false a las opciones de css-loader (expulse CRA o use esto: https://github.com/gsoft-inc/craco o esto: https://github.com/timarney/react-app-rewired
    (puede encontrar configuraciones de muestra en la página de problemas de github)

  • use esta nueva característica de css-loader https://github.com/webpack-contrib/css-loader/pull/1264
    (lanzado en 5.1.0, la última versión actual es 5.1.3; para usar esa versión, puede agregar lo siguiente al paquete.json: “resoluciones”: { “css-loader”: “5.1.3” } (en la raíz nivel) )

  • Respuesta corta: mueva la imagen a la carpeta src/images en lugar de que esté en Público.

    – Ben en California

    24 oct 2022 a las 17:06

¿Ha sido útil esta solución?