CODEWITHSUNDEEP
htmlreactjs
Mike
Mike

Reputation: 73

How can I put a image using a div with React?

I am trying to put a image in the background in a div but it does not work. Here is my code :

<div
                    style='background: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60")'
                    className="h-52 sm:h-full sm:w-72 rounded-xl bg-gray-100 bg-center bg-cover"
                ></div>

Pycharm told me XML tag has empty body because I have nothing between the div tag but I just want to display a image from unsplash ...

Could you help me please ?

Thank you very much !

Upvotes: 0

Views: 4405

Answers (2)

nicolas ayala
nicolas ayala

Reputation: 11

You should use "style={{ backgroud: "url('...')"}}" for put this in React. And you add a height in you style / class.

<div style={{
    background: "url('https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60')",
    height: '50vh'
}}>
</div>

Upvotes: 0

Ritik Banger
Ritik Banger

Reputation: 2738

You can use the below snippet, make sure the path to image is correct.

<div style={{ backgroundImage: "url(/exampleImage.png)" }}>
  Hello World
</div>

Or

 <div style={{ backgroundImage: "url(/exampleImage.png)" }}/>

Upvotes: 1

Related Questions