Image is not displaying from local

Question

I want to display the image from my local , but it is showing like this.

I don't understand what is wrong here!

The below img code i'm using in provider.js file

 <img src='../../../public/icons/videoOn.png'/>

Answer 1

Don't use path as src , because it must be accessible via web.

Means you need src="http://example.com/public/icons/videoOn.png" or src="/public/icons/videoOn.png"

---

In that situation always check Network tab and see from where your browser tries to get file. You must be able to go to same URL and access file

Answer 2

After looking at the screenshot, this looks like a React JS project. For static assets, you need to import them, but only when they're inside the src folder. If they're inside the public folder, you can do this:

<img src='/icons/videoOn.png' />

The above code should work for you. If you're deploying it to a non-root and should be safer, then use process.env.PUBLIC_URL :

<img src={process.env.PUBLIC_URL + '/icons/videoOn.png'} />