不能在 webpack 中使用 <img> 标签

Question

最近，我一直在尝试通过 HTML 文件在我的 webpack 项目中使用图像。当我用它的实际路径调用图像时，它只显示一个损坏的图像图标。我试过使用 <img src="<%= require() %>"/>，正如我在 Internet 上看到的那样，并且还使用 import './assets/C.png' 将它们导入 javascript，但似乎没有任何效果，只是显示那个烦人的图标。当你去检查和查看来源时，你会看到图像但实际上看不到照片：

但实际上，CSS 样式表中调用的 png 文件已正确捆绑：

任何人都可以向我解释为什么会发生这种情况或如何解决它吗？谢谢，如果您需要更多文件，请告诉我，这是我的代码；

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>

我的项目分布:

Answer 1

好吧，课程提供的文件有一个尚未修复的错误，因此我必须使用资产模块修复该错误。

不能在 webpack 中使用 <img> 标签

Can't use <img> tags with webpack

html

webpack

png