微信小程序 background 背景图片 本地加载错误

image.png

原因:微信小程序中的背景图片不能是本地图片。

3种解决方法:
1、背景图片的路径换成远程网址,即网络图片;
2、使用base64格式编码的图片;
图片转base64链接地址:http://imgbase64.duoshitong.com
3、直接使用<image/>组件实现。

延伸阅读
1.什么是base64格式的编码?
图片的 base64 编码就是可以将一张图片的数据编码成一个字符串,然后我们可以使用这个字符串来代替本地图片的路径(地址)。

2.使用base64格式的编码有什么意义呢?
我们都知道,网页上的每一张图片,都是在网页加载时消耗一个 http 请求下载下来的。如果图片的下载不需要向服务器发出请求,而是可以随着HTML的加载同时下载到本地,那岂不是太好了。所以说,base64编码正好解决了这个问题。

3.什么时候使用base64格式的编码?
如果图片足够小,且存在特殊性用途(无法被制作为雪碧图,即CSS Sprites),base64格式的编码就是最明智的选择。

4.使用base64格式的编码并不代表性能优化
base64编码的优点我们上面也提及了:可以减少一个图片的HTTP请求。每一件事都有它的两面性,那么base64编码所带来的坏处是什么呢?因为图片经过base64编码后的字符串数据特别繁杂冗长,而大量使用base64编码格式的图片会导致CSS文件的体积不断增大,与此同时,CSS文件的大小还会影响整个页面的渲染速度,这就会导致图片无法及时加载而使用户长时间停留在空白页面。因此,虽然base64编码好用,但是我们不能滥用它。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3 119
  • 最是喜爱雨后清新的翠绿,那么自信,那么淡然! 欣赏之余,仿佛置身于世外桃源,没有烦事叨扰,很是惬意! 一盆一景,不...
    曼丽心语阅读 360评论 3 4
  • 我叫王绿(化名),今年42岁,有个儿子已经读高中了,我和老婆在一座三线城市开了家小卖部,生意一般,虽不能大富大贵,...
    安落汐阅读 2,225评论 51 46
  • 今日阅《最文摘》,卷首语直言,人应生活的有情调。何为生活情调,依我来看,就是不刻意追求诗和远方。 你可...
    JancisLee阅读 216评论 2 1
  • 有一位非常聪明的讲师,在赚钱的路上,他除了干一件事情,其他什么都不干。但就凭那件事,让他一年赚了100万以上。 别...
    永胜智慧阅读 498评论 0 0