微信小程序使用本地图片作为背景

更新日期: 2020-04-15 阅读次数: 928 字数: 255 分类: 微信小程序

如何测试

由于每个微信小程序的初始化项目中都包含 logs 这个页面,可以拿这个页面作为测试。

使用本地图片作为 background-image 值,会报错

.bg {
  background-image: url("/images/some_bg.jpg");
}

报错信息为:

VM306:1 pages/logs/logs.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用 image 标签。请参考文档:https://developers.weixin.qq.com/miniprogram/dev/qa.html#本地资源无法通过-wxss-获取

解决方案一:base64

相比使用网络图片,或者 image 标签,base64 的改动最小。

但是图片转换为 base64 会有体积上的增加,大概增加 30% 左右。

例如:16.48 KB 的图片转换成 base64 格式之后变成了 21.98 KB。

在线转换图片 base64 的网站:https://www.base64-image.de

注意不要在 VIM 进行这个修改操作,否则会把 vim 卡死。。。也可能是 WSL 的问题。

样式文件代码:

.bg {
  background-image: url('data:image/jpeg;base64,xxxxx');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;
}
领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

tags: 微信小程序图片背景

相关文章

爱评论不评论

近期节日

2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
2020年10月15日 国际盲人节
2020年10月16日 世界粮食日
2020年10月17日 国际消除贫困日
2020年10月22日 世界传统医药日
查看更多节日