im unable to Load local image in React JS this is the file location:

ive tried using

<img id="shoe1" src="shoe1.jpg"alt="shoe1"/>
<img id="shoe1" src="./shoe1.jpg"alt="shoe1"/>

and within the folder like this too:

<img id="shoe1" src="../img/shoe1.jpg"alt="shoe1"/>
<img id="shoe1" src="./img/shoe1.jpg"alt="shoe1"/>

CodePudding user response：

Are you importing the image on top of the files you want to use them? You should follow this page from the documentation:

https://create-react-app.dev/docs/adding-images-fonts-and-files/

import shoe1 from './shoe1.jpg';

CodePudding user response：

import imgg from "../img/shoe1.jpg";

<img src={imgg} alt="yourimagecomeshere" />

CodePudding user response：

If your image placed in the same folder(the first picture):

<img id="shoe1" src="shoe1.jpg" alt="shoe1" />

If your image placed in the img folder(the second picture):

<img id="shoe1" src="img/shoe1.jpg" alt="shoe1" />

CodePudding user response：

can you move the image to assets folder and do something like this

<img id="shoe1" src="../assets/shoe1.jpg"alt="shoe1"/>