问题描述:
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、但此时就是不能将图片的信息加载出来,也不报错;
2、问题原因:
是因为 Webpack 版本的原因,由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ,已经是 5.0 版本及以上了,而采用之前 5.0 版本以下的方法是行不通的;
3、问题解决的方法:
A、在 webpack.config.js 添加的代码修改为:(其余的信息不变)
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
type: 'asset'
}
本文讲述了在Webpack 5环境下,使用`url-loader`处理CSS中背景图片不生效的问题。问题原因是Webpack 5对资源处理方式的改变。解决方案是将`url-loader`替换为`asset`模块来处理图片。通过修改webpack.config.js配置,成功解决了图片加载问题。
3462

被折叠的 条评论
为什么被折叠?



