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="" /> */}

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

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.


Hope this helps :slight_smile:

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?