javascript - Webpack 文件加载器不适用于图像。创建curropted文件并且img src指向该文件

Question

我正在使用 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="">

标签： javascripthtmlwebpack

Answer 1

webpack 版本 5 不推荐使用 file-loader，因此切换到 Asset Modules 是可行的，这是文档。

资产模块