Where to put pictures in react app and how to reach them?

Question

React

I put it in the public folder, where index.html and favicon.ico are located, but how can I now reach this picture from the component through the src tag?

Answer 1

If you are building on Webpack, and the picture is in src/img/image.svg
And the output folder is dist/
webpack.config in modules

{
    test: /\.(png|svg|jpg|gif)$/,
        use: [{
    loader: 'file-loader',
    options: {
        name: f => {
            let dirNameInsideAssets = path.relative(path.join(__dirname, 'src'), path.dirname(f));
            return `${dirNameInsideAssets}/[name].[ext]`;
        }
    }
}],
},

index.js
import "./img/image.svg";
In layout
<img src="img/image.svg" alt=""/>

Answer 2

Put pictures either in src and import them via import.
Either in public and contact directly, but without public. That is, if the image is in /public/images/cat.jpg, then you need to access it through /images/cat.jpg