Can't use <img> tags with webpack-CodePudding

Lately, I've been trying to use images in my webpack project by the HTML file. When I call the image with its actual path it just displays a broken image icon. I have tried using <img src="<%= require() %>"/> as I saw on the internet and also importing them on javascript using import './assets/C.png' but nothing seems to work and just displays that annoying icon. When you go to inspect and look at sources you see the images but you can't actually see the photo:

But actually, the png files called on the CSS stylesheet are bundled correctly:

Can anyone explain to me why this happens or how to fix it? Thanks, if you need more files let me know, here is my code;

webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        path: path.resolve(__dirname, "../dist"),
        filename: "bundle.[contenthash].js"
    },
    devtool: 'source-map',
    plugins:
    [
        new CopyWebpackPlugin({
            patterns: [
                { from: path.resolve(__dirname, '../static') }
            ]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../src/index.html'),
            minify: true
            
        }),
        new MiniCSSExtractPlugin()
    ],
    module:
    {
        rules:
        [
            // HTML
            {
                test: /\.(html)$/,
                use: ['html-loader']
            },

            // JS
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:
                [
                    'babel-loader'
                ]
            },

            // CSS
            {
                test: /\.css$/,
                use:
                [
                    MiniCSSExtractPlugin.loader,
                    'css-loader'
                ]
            },

            // Images
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },

            // Fonts
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                use:
                [
                    {
                        loader: 'file-loader',
                        options:
                        {
                            outputPath: 'assets/fonts/'
                        }
                    }
                ]
            }
        ]
    }
}

index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>My page</title>

    <script defer src="script1.js"></script>
    <script src="script2.js"></script>

    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="./assets/C.png" type="image/x-icon">

</head>

<body>

        <div class="headerdiv">
            <a class="logo" href="/"><img class="logoimg" src="./assets/CREAT_extended_blue.png"></a>
            <nav>
                <ul class="nav__links">
            <li><a href="index.php" class="active">Página principal</a></li>
            <li><a href="vender.php">Vender un producto</a></li>
            <li><a href="#carrito">Carrito de la compra</a></li>
            <li><a href="micuenta.php">Mi cuenta</a></li>
            <li><a href="info.html">Información</a></li>
            </a></li>
                </ul>
            </nav>
            <a class="cta" href="#">Contact</a>
            <p class="menu cta">Buscar</p>
        </div>
        <div id="mobile__menu" class="overlay">
            <a class="close">&times;</a>
            <div class="overlay__content">
                <a href="index.php" class="active">Página principal</a>
                <a href="vender.php">Vender un producto</a>
                <a href="#carrito">Carrito de la compra</a>
                <a href="micuenta.php">Mi cuenta</a>
                <a href="info.html">Información</a>
            </div>
        </div>
        <script type="text/javascript" src="mobile.js"></script>

</script>

    <header data-aos="fade-up" class="cabecera-inicio" id="hero-image">
        <canvas class="webgl"></canvas>
        <script src="script.js"></script>
    </header>
    <div class="page-content">

    </div>
      <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

</body>
<footer>


    <div class="textos-destacado" >
        </br>
        <h1 data-aos='fade-up'>
            <b> This is a title </b>
        </h1>
    </div>

    <div class="sponsor">

        
        <img data-aos='fade-left' src="./assets/hoja2.png"/>
            <div class="sponsor-producto">

            </div>
        <img data-aos='fade-right' src="./assets/hoja2.png"/>
    </div>
</footer>
</html>

My project distribution:

CodePudding user response：

Well, the files provided with the course had a bug that wasn't fixed yet so with asset-modules I got to fix that bug.