我正在使用WebPack，并尝试使用PNG图像在我的Firefox浏览器中显示。问题是webpack在dist文件夹中创建了两个图像，其中一个可能有错误，既不能在我的笔记本电脑上也不能在浏览器中显示（“加载图像时发生错误”），webpack尝试使用它，而不是另一个应该工作的图像。

我的webpack.config.JS有以下模块：

module: {
    rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: ['file-loader']

        }
    ]
}

styles.CSS中，我使用了background-image：

<代码>.徽标{background-image：URL（'./assets/foto.PNG '）；背景大小：封面；高度：200px；宽度：200px；边距：0自动；}

index.HTML中，我使用了一个DIV容器：

<代码><；DIV类="；标识"；>；<；/DIV>；

下面是我的项目结构：

<代码>距离/-h74g3ffgf3ff34h76.PNG-Analytics.54t54gg4.JS-ab0d12j489gh4igh8.PNG-index.HTML-main.h74rg34u73f.JS高级研究中心/资产/-foto.PNG风格/-styles.CSS-Analytics.JS-index.HTML-script.JS-package-lock.JSON-package.JSON-webpack.config.JS

版本：

• webpack：5.5 3.0
• CSS加载器：6.3.0
• 文件加载器：6.2.0

我认为foto.PNG的路径有问题，但我不知道如何解决这个问题。绝对路径和相对路径不起作用。

为什么webpack在dist文件夹中创建两个图像，并使用其中一个损坏的图像？我做错了什么？

顺晟科技：

我通过使用资产模块而不是URL加载器和文件加载器解决了这个问题。所以代码看起来像这样：

<代码>{测试：/\。（JPE？G|PNG|GIF|SVG）$/，类型：'资产/资源' }