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

JavaScript
#1

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;
}
#2

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:

#3

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?

#4

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

#5

Omg of course! Thank you buddy

1 Like
#6

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

#7