CODEWITHSUNDEEP
reactjs
Ali
Ali

Reputation: 113

Image is not displaying locally

I need set background image to DIV element with props element and if I import the image, it is displayed correctly.

import image from '../../../assets/upload/sport/sport1.jpg';

const function = (props) = {
      <div style={{backgroundImage: `url(${image})` }}> </div>
}

But If I use this:

const function = (props) = {
      <div style={{backgroundImage: `url(../../../assets/upload/${props.path})`}}> </div>
}

props.path contains: sport/sport1.jpg

It is not working. Can you help me, why? Thanks

Upvotes: 0

Views: 31

Answers (1)

Dean James
Dean James

Reputation: 2633

The path to your image is not correct when you refer to the same file via CSS. Your development environment location is http://localhost:3000 so having an image that is in a higher up directory is invalid.

When you import it, Webpack handles the file and sets the path accordingly.

If you want to refer to a static image outside of Webpack, you can put your image inside the public directory, and use:

<div style={{backgroundImage: `url(/${props.path})`}}> </div>

Upvotes: 1

Related Questions