how to use path to image file

August 9, 2022

I’m trying to load an image file in my reactjs project but it results in a broken image icon.. I’m loading the image from the Test1.js using <img src='../logo-001.png' />

here’s my folder structure:

src
  components
    Test1.js // I'm loading it from this file
  logo-001.png

>Solution :

Use imports like:

import img from '../icon.png';
<img src={img} alt="img" />

Or put your img on the public folder and use it:

<img src={process.env.PUBLIC_URL + '/img.png'} alt="img" />

If you still has problems, probably is related with a problem I had with vue JS, I needed to disable the es-module on the file-loader, because it was messing with the resources path.