how to use path to image file-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

Hey you can try a simple another way to import image from your folder. below the code for example.

 import logo-001 from '../logo-001.png';  // Here the correct folder path should be given
 
  <img src={logo-001} alt="Logo" />