How to use DirectusImage tag as a background?

Question

I am a newbie when it comes to using Directus. I am trying to style an card to have a background image of a Directus Image. How would i be able to do that?

I have tried:

<Card style={{backgroundImage:"url({someColletion.image.id})" >
    <CardHead/><CardContent />
</Card>

Answer 1

Style as following:

<Container style={{position: "absolute">

<DirectusImage style={{position:"relative"}} />

Reference: https://www.w3schools.com/howto/howto_css_image_text.asp

Answer 2

Hope this can help, you have to pass imagePath to Card component and set the background inside Card component, you can not set it as Direct Image on react component

import backgroundImagePath from "../../assets/your_background_image.jpg";

<Card  imagePath=${backgroundImagePath}>
    <CardHead/><CardContent />
</Card>

Card.jsx

function Card({imagePath}) {

    return (
        <>
            <div style={{ backgroundImage: `url(${backgroundImagePath})` }}  >This is a div with background image </div>
        </>
    );
}
export default Card;