CODEWITHSUNDEEP
htmlcssreactjs
OmarLittle
OmarLittle

Reputation: 503

Src in <img/> tag is failing to load image

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.

Upvotes: 0

Views: 355

Answers (1)

Mayank Gupta
Mayank Gupta

Reputation: 202

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.

Upvotes: 1

Related Questions