百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 怎样解决webpack css url报错题目
分享文章到:

怎样解决webpack css url报错题目

发布时间:01/01 来源:未知 浏览: 关键词:

webpack css url报错是由于图片加载途径错误,其解决方法:第一翻开响应的代码文件;然后打包样式中的背景图;最后从新增加publicPath即可。

本教程操纵环境:Dell G3电脑、Windows7系统、webpack3.0&&css3版本。

引荐:《css视频教程》

webpack中css的url报错?

css-loader:

//打包样式中背景图
{
    test: /\.(png|jpg)$/,
    loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"
    //limit参数,代表假如小于大约4k则会主动帮你紧缩成base64编码的图片,不然拷贝文件到生产名目
    //name后面是打包后的途径;
    //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超越了就不克不及打包,
    //而是指当图片大小小于限制时会主动转成 base64 码援用
    //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式援用。
},

当小于8192,就打包成base64,那么,大于的就不做处置;

情形:我在main.css中背景图:

.page4-bg{
  background:url("../images/page4-bg.jpg") no-repeat center;
  background-size:cover;
}

结果:打包的时候,图片是在dist/images/文件夹下的,但是操纵台中却是:

Failed to load resource:the server responded with a status of

404(Not Found)

图片没有寻到,于是我去查看途径:

3bf117303a64c63e4cf3f42713deea3.png

貌似图片是加载进来了,仿佛没什么问题,接着在图片地址上鼠标右击---open in new tab,结果

376d89f27663bb8d2f9b1617d20e556.png

而我文件图片的名目地址是

e8a03365d0d4a8a26bb00073d339599.png

这样的,去除途径中的css,就能够显示图片了

39b243c05341450fd2adf4561d60698.png

解决方案:

//打包样式中背景图
{
    test: /\.(png|jpg)$/,
    loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]",
    options:{
        publicPath:'./images'
    }
    //limit参数,代表假如小于大约4k则会主动帮你紧缩成base64编码的图片,不然拷贝文件到生产名目
    //name后面是打包后的途径;
    //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超越了就不克不及打包,而是指当图片大小小于限制时会主动转成 base64 码援用
    //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式援用。
},

增加publicPath。

以上就是怎样解决webpack css url报错问题的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有152人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板