javascriptreactjs

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 ?

EDIT

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?

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'} />