How to import an image in React if the path of your image is not working

Viewed 35

My image path is not working, I did a better solution for my case I hope this works for you too.

The problem for my case is:

I did use

import logo from './components/image/Serenity.png';

but the problem with this is when I put it on

<img={logo} alt=''/>

it doesn't work.

So the solution for my problem is:

Instead of import logo from './components/image/Serenity.png';

I did one of these

  • import logo from '../images/Serenity.png';
  • const logo = require("../images/Serenity.png")

then it worked.

1 Answers

In react-app put all images in public folder and access them like this:

<img src = {'/Serenity.png'}/>

!NOTE: you no need to add the path to the public folder

Related