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

Question

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 !

Would it help to self-close the tag? <div style="..." className="..." /> — olle
– olle, Commented Jan 10, 2022 at 11:58
The error you should be seeing is: "The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." — DBS
– DBS, Commented Jan 10, 2022 at 12:00

Ritik Banger · Accepted Answer · 2022-01-10 11:59:37Z

1

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)" }}/>

answered Jan 10, 2022 at 11:59

Ritik Banger

2,8688 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pistou · Accepted Answer · 2022-01-10 12:08:52Z

0

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>

edited Jan 10, 2022 at 12:08

pistou

2,8775 gold badges35 silver badges63 bronze badges

answered Jan 10, 2022 at 12:03

nicolas ayala

211 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related