解决 Webpack 打包图片不报错也不显示问题，但其图片就是显示不出来的问题

漂亮小咪

于 2022-04-20 15:18:36 发布

阅读量1.4k

点赞数 3

文章标签： javascript vscode

本文链接：https://blog.youkuaiyun.com/su_yun/article/details/124298348

版权

本文讲述了在Webpack 5环境下，使用`url-loader`处理CSS中背景图片不生效的问题。问题原因是Webpack 5对资源处理方式的改变。解决方案是将`url-loader`替换为`asset`模块来处理图片。通过修改webpack.config.js配置，成功解决了图片加载问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A、在 webpack.config.js 中也添加了代码为

 //limit用来设置字节数，只有小于limit值的图片，才会转 //为base64图片
 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:"url-loader?limit=16940"}

B、在 ‘.css’ 文件中添加的信息为：

#box{
    width: 700px;
    height: 500px;
    background-color: pink;
    background: url('../images/1.png');
}

C、但此时就是不能将图片的信息加载出来，也不报错；

是因为 Webpack 版本的原因，由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ，已经是 5.0 版本及以上了，而采用之前 5.0 版本以下的方法是行不通的；

A、在 webpack.config.js 添加的代码修改为：(其余的信息不变)

{
     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
     type: 'asset'
}