使用反应样式设置背景图像

Question

i am making a project of my own and i am trying to display 3 components that will render a different image for one of them. The image is not displaying, i think the problem is the server is downloading the image as a html/text type. I am new to react and i am having difficulties displaying images...

style={{backgroundImage: url(${props.img}) } }

img={city.imageURL}

imageURL: '/assets/mount-fugji.png'

And by the way, how do i access the style object?

Answer 1

In React you should use:

styles={{ backgroundImage:`url(${picture})` }}

so you can try to edit code like this:

style={{backgroundImage: `url(${props.img})`} }

Answer 2

you can use like

 <div style={{ backgroundImage: `url(${props.img || city.imageURL})` }} />;