ReactJS and images in public folder

Issue

Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component.

Any ideas ?

EDIT

I want to import an image inside Bottom.js or Header.js

The structure folder is:

I do not use webpack. Should I ?

Edit 2

I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:

Where I need to add the paths of the images and how?

Thanks

Solution

To reference images in public there are two ways I know how to do it straight forward.
One is like above from Homam Bahrani.

using

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

And since this works you really don’t need anything else but, this also works…

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Answered By – Gerard

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0