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

如何测试

由于每个微信小程序的初始化项目中都包含 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式