小程序背景图片从服务器获取,小程序之背景图片的加载

说在前面

最近由于项目需要所以学了下小程序，也做了一些东西，随后便有了以下的一些总结了，先说说关于如何解决小程序背景图片pc端调试完美不缺，而在真机调试的时候却消失不见的情况。

问题描述

最近做项目的时候要实现一个导航页面，我的想法是用一张好看的图片做背景，在pc端调试的时候效果不错，但是在真机调试的时候却发现那张背景图片不翼而飞了。

老规矩，以源码为导向

index.xml

index.wxss

page{

height: 100%;

}

.container{

background-image: url("../resources/images/wait.png");

background-size:100% 100%;

background-repeat:no-repeat;

}

在pc端调试的时候已经可以看到出现背景图片了，但是在真机调试的时候却发现没有背景图片，那么原因是什么呢？我谷歌了多次之后以及翻看了小程序的文档之后发现这可以说是小程序的一个bug，我相信小程序在不久会解决这个bug，但是我们现在要用到，总不能等到对方法解决了bug我们才用背景图片吧？对的，这里提供了几种解决方法！

解决方法一：在使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器，如：https://xxxx/xxx.jpg；

解决方法二：将背景图片使用编码base64进行转换，可以在这个网址进行 http://tool.css-js.com/base64.html 转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；

解决方法三：使用image组件而去掉背景图片；

Note:发布的这些文章全都是自己边学边总结的，难免有纰漏，如果发现有不足的地方，希望可以指出来，一起学习咯，么么哒。

开源爱好者，相信开源的力量必将改变世界:

** osc :** https://git.oschina.net/xi_fan

github: https://github.com/wiatingpub