关于webpack5打包图片不报错但是也不显示问题

我在使用 webpack : "^5.49.0"这个版本的时候，使用url-loader处理图片打包，这时候打包输出会有两个图片文件，一个是打包后的图片，一个图片内容是引入刚才的这个图片，比如他的内容是
最后导致打包图片不报错，但是也不显示，查阅官网后，发现该问题是由于webpack5版本太新，官方推荐使用asset module 资源模块替换loader

转自官网：
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

如果你还想使用url-loader 那么你只需要在url-loader中设置type: 'javascript/auto’即可；

 {test:/\.(jpg|png|gif)$/,loader: "url-loader",options:{limit: 8 * 1024,esModule: false,name:"[hash:10].[ext]"},type: 'javascript/auto'}

由于loader可能不再更新，现在官方更推荐该写法

{test:/\.(jpg|png|gif)$/,type: 'asset/resource'}

这样后我们就可以在页面上看到打包后的图片