ReactJS and images in public folder


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 ?


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

The structure folder is:

enter image description here

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:

enter image description here

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



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


    <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

Leave a Reply

(*) Required, Your email will not be published