wxss中background属性使用背景图片无效的问题
前提
所要实现的效果图如下所示:
(两个 view 之间使用两个 格式为.png 的绑带图片相连接)
我的实现方式:习惯了通过伪元素设置
background属性
来实现。基于简便快捷的方式,并没有选择使用官方提供的<image/>组件
来实现。- 首次开发微信小程序,并不知道
background
属性中的背景图像(即background-image属性)
无法将url
设置为本地的图片路径
。 - 如果你不小心设置了,就会出现下面的情况。
此处通过 background属性
设置了本地图片作为背景图
然后,你会惊喜的发现:居然报错了!
报错内容为:渲染层错误
。
并且提示:wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。
参考文档:本地资源无法通过 WXSS 获取(点击查看)
实现方式
使用经过base64格式编码过的图片
分析问题
原因:微信小程序中的背景图片不能是本地图片。
解决方法:
- 背景图片的路径换成远程网址,即网络图片;
- 使用
base64
格式编码的图片; - 直接使用
<image/>组件
实现。
延伸阅读
1.什么是base64
格式的编码?
图片的 base64
编码就是可以将一张图片的数据编码成一个字符串,然后我们可以使用这个字符串来代替本地图片的路径(地址)。
2.使用base64
格式的编码有什么意义呢?
我们都知道,网页上的每一张图片,都是在网页加载时消耗一个 http
请求下载下来的。如果图片的下载不需要向服务器发出请求,而是可以随着HTML
的加载同时下载到本地,那岂不是太好了。所以说,base64
编码正好解决了这个问题。
3.什么时候使用base64
格式的编码?
如果图片足够小,且存在特殊性用途(无法被制作为雪碧图,即CSS Sprites
),base64
格式的编码就是最明智的选择。
4.使用base64
格式的编码并不代表性能优化 base64
编码的优点我们上面也提及了:可以减少一个图片的HTTP
请求。每一件事都有它的两面性,那么base64
编码所带来的坏处是什么呢?因为图片经过base64
编码后的字符串数据特别繁杂冗长,而大量使用base64
编码格式的图片会导致CSS
文件的体积不断增大,与此同时,CSS
文件的大小还会影响整个页面的渲染速度,这就会导致图片无法及时加载而使用户长时间停留在空白页面。因此,虽然base64
编码好用,但是我们不能滥用它。