React.js my image inside of the div doesn't shows up

I’m using React.js my image doesn’t shows up in my div. But when I put it in navbar it shows up, any help would be great thanks


<div className="main-image-first">
<p>Why is not working damn it</p>
{/* <img className="image-work" src="./images/abstract-access.jpg"  alt="" /> */}
</div>

.mian-image-first {
  /* position: relative; */
  background-image: url('./images/abstract-access.jpg');
  height: 500px;
  width: 200px;
}

1 Like

In React, an image isn’t loaded the same way it would be in HTML.

What you need to do is require the image from its directory file like this.

src={require(’./images/abstract-access.jpg’)}

Hope this helps :slight_smile:

1 Like

I’ve done a couple more Reacj sites but never had this problem before, and never used this tag before. I worked. But how can I do this while using CSS?

That’s strange, usually in a react app if I don’t require an image in that way i get an error.

As for your css you have a typo. You have .mian-image-first written in your css and “main-image-first” written on your div className

but pulling the image with url(‘etc’); in your css should be fine

Omg of course! Thank you buddy

1 Like

Using “require” worked for me for most cases, except for IOS devices. Any idea why?