ReactJS and images in public folder

Question

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 componen

Answer 1

1- It's good if you use webpack for configurations but you can simply use image path and react will find out that that it's in public directory.

2- If you want to use webpack which is a standard practice in React. You can use these rules in your webpack.config.dev.js file.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

then you can import image file in react components and use it.

import image from '../../public/images/logofooter.png'