I'm using React and i'm trying to inject dynamically a backgroundImage from a data.json, so i'm writing my backgroundImage directly in the jsx, as inline-style, but the background don't wants to show up. I've already checked the source, and it's correct !
I'll give you a code sample and a screen of my console to show you that my path for the backgroundImage is correct !
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>
);
};
Screenshot