Webpack creates the "left" png and links to it, but ignores the real image?

Question

HTML

Config:

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        app: [
            path.resolve(__dirname, './src/bundleStyles.js'),
            path.resolve(__dirname, './src/main.js'),
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(png|jpeg|gif|svg|ico)$/i,
               use:[
                   {
                    loader: 'file-loader',
                    options: {
                      publicPath: 'src/assets/img/',
                      outputPath: 'img/',
                      name: '[name].[ext]',
                        
                    },
                   }
               ]
              },
              {
                test: /\.html$/,
                use: ['html-loader']
              },
            {
            test:/\.(s*)css$/,
            use: [
                miniCss.loader,
                'css-loader',
                'sass-loader',
            ]
        },
    ]
    },
    plugins: [
        new miniCss({
            filename: 'style.css',
        }),
        new HTMLWebpackPlugin({
             template: "./src/index.html",
             title: 'DIGITAL'
         }),
        new CleanWebpackPlugin(),
    ]
};

When building, it creates a png, which has nothing to do with what is indicated in the layout:

───dist
    └───index.html
    └───style.css
    └───bunde.js
    └───32yut2ee23423.png
    └───img
       └───img.png

Above the tree, you can see that there is 32yut2ee23423.pngalso an Img folder, in which the desired image is located.
Also, in the html paths, it specifies the path exactly to 32yut2ee23423.png
- how to fix this?