Why img tag doesn't load any images with WebPack5 and React?

Question

I have spent some hours to understand how to load images in src attribute or as inline style with background-image (url) but in my case all variants which I've found - don't work. It's really strange but I have started 50 times my local server and 3 times images were present and it makes me sick.

So how I can just use local images with img or inline style (or in scss file) with WebPack5 and React?

Here is my webpack configuration

const webpackConfig = () => ({
    entry: './src/index.tsx',
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'images',
                      publicPath: 'images',
                    },
                  },
                ],
              },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
                exclude: /build/,
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: `@import 'src/styles/variables';`,
                        },
                    },
                ],
            }
        ],
    },
    devServer: {
        port: 9100,
        open: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
});

Here is my folders structure (folder logos contain some folders and images inside

And here are the variants how I try to use imports but they don't work:

<img src='../../../logos/epl/teams/arsenal.png' />
<img src='images/arsenal.png' />

Answer 1

Your application must copy/publish those images to public access (normally assets folder in most frameworks)

src/images folder is not for public access I guess, you should try to move images folder to public folder and then try to access to them in browser