Estoy usando React y estoy tratando de inyectar dinámicamente una imagen de fondo de un data.json, así que estoy escribiendo mi imagen de fondo directamente en jsx, como estilo en línea, pero el fondo no quiere aparecer. Ya verifiqué la fuente, ¡y es correcta!
¡Le daré un ejemplo de código y una pantalla de mi consola para mostrarle que mi ruta para la imagen de fondo es correcta!
const Card = ({ artCard }) => { const backgroundThumbnail = artCard.images.thumbnail; console.log(backgroundThumbnail); return ( <React.Fragment> <div className="card" style={{ backgroundImage: `url(${backgroundThumbnail})`, backgroundRepeat: "no-repeat", backgroundSize: "cover", backgroundPosition: "center", minHeight: "300px", minWidth: "300px", }} > {/* <h3>{artCard.name}</h3> */} {/* <h4>{artCard.artist.name}</h4> */} </div> </React.Fragment> ); }; Captura de pantalla 👇
Olvidó agregar una comilla doble dentro del corchete, intente esto:
backgroundImage: `url("${backgroundThumbnail}")`Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Muy bien, encontré el problema, mis imágenes no estaban en la carpeta pública, ¡así que reaccionar no lo leerá!