0

I am working with react and want to implement an image in the img html tag.

This is my project: enter image description here

My code, which is in Testimonials.js looks like this:

<img  className="s-img-switch" src="images/hero.jpg" alt="" />

and it doesn't work. I also tried like this:

<img  className="s-img-switch" src="./images/hero.jpg" alt="" />
<img  className="s-img-switch" src="../components/images/hero.jpg" alt="" />

but it also doesn't work. But when I put an URL, for example like this:

<img  className="s-img-switch" src="https://media.moddb.com/images/members/5/4550/4549205/dog.jpg" alt="" />

it works.

Also, if I import the image in Testimonials.css like this:

background-image: url("./images/hero.jpg");

it also works. So that would mean that the image is ok.

This is what I see when I inspect the page, no matter what I do: enter image description here

I can't seem to find an answer for this, so all help would be very much appreciated.

OmarLittle
  • 423
  • 1
  • 9
  • 18
  • Does this answer your question? [HTML Image not displaying, while the src url works](https://stackoverflow.com/questions/18413929/html-image-not-displaying-while-the-src-url-works) – A-Tech Nov 07 '22 at 11:08

1 Answers1

1

Solution 1:- By making a component of the image that looks neet and clean code too for this solution You have to import the image on top of your component code first like

import heroImg from "path_of_folder/imageName.jpg";

and now you can use the image by

<img src={heroImg} />

Solution 2:- Copy your images folder into public folder it also work.

Mayank Gupta
  • 153
  • 5