'Load local image in React JS

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"/>

enter image description here

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"/>

enter image description here

htmlcssreactjs


Solution 1:[1]

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';

Solution 2:[2]

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

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

Solution 3:[3]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivo
Solution 2 Ravi Mareboina
Solution 3 AREMU

Related Questions