Webpack 文件加载器不适用于图像。创建损坏的文件并且 img src 指向该文件答案

【问题标题】：Webpack file-loader not working for images. Creating curropted file and img src is pointed to that fileWebpack 文件加载器不适用于图像。创建损坏的文件并且 img src 指向该文件
【发布时间】：2021-11-02 16:49:09
【问题描述】：

我正在使用 webpack 文件加载器将图像加载到 HTML 页面中。它正在生成一个损坏的文件，并在 img 标签中使用 src 作为该文件。

这是我在 webpack.config.js 中的设置

{
            test: /\.(jpg|png|gif|svg)$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {   
                        name: '[name].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/'
                    }
                }
            ]
        },

最终生成的图片标签

<img src="8c7b2da10ea507a829fd.jpg" alt="">

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

file-loader 在 webpack 版本 5 中被弃用，所以切换到 Asset Modules 是可行的，这里是文档。

Asset Modules

【讨论】：

为什么不添加您更改的代码并且现在也可以使用？