es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo añadir una clase de imagen de fondo al archivo de configuración de Tailwind en una aplicación de CRA.

Cómo añadir una clase de imagen de fondo al archivo de configuración de Tailwind en una aplicación de CRA.

05 Aug, 2023 Programación

Estoy tratando de usar una imagen como fondo usando tailwind css en Create React App. Pero no puedo averiguar cómo agregar la clase de imagen de fondo.

El error:

Module not found: Error: Can't resolve './src/images/pages/login.svg' in 'C:<some_project>\src'

Lo que intenté:

backgroundImage: {
  "login-image": "url('./src/images/pages/login.svg')",
},
// asumí que comienza desde src
backgroundImage: {
  "login-image": "url('/images/pages/login.svg')",
},
// también intenté colocarlo en la página pública e incluirlo como
backgroundImage: {
  "login-image": "url('/images/pages/login.svg')",
},

¡Cualquier ayuda sería apreciada! Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el error se está produciendo porque no se puede resolver la ruta de la imagen. Aquí tienes algunas cosas que puedes probar:

    • Verifica dos veces la ruta de la imagen para asegurarte de que sea correcta. También puedes intentar usar una ruta absoluta en lugar de una ruta relativa.
    • Mueve la imagen a la carpeta “public” en lugar de la carpeta “src”. Luego, referencia la imagen usando una ruta absoluta que comienza con ‘/’. Por ejemplo: backgroundImage: {"login-image": "url(/images/pages/login.svg)"}
    • Asegúrate de haber importado la clase CSS en el archivo/componente correcto donde se está usando la imagen de fondo. Por ejemplo, si definiste login-image en un archivo CSS separado, asegúrate de importar ese archivo en el componente donde lo estás utilizando.

Comments are closed.