小程序之背景图片的加载

说在前面

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


问题描述

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


老规矩,以源码为导向


index.xml

<view class="container" bindtap="coming"></view>

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

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,631评论 25 709
  • 今天又要去上课啦!明天有旋风少女呢好开森
    久玫阅读 2,707评论 1 1
  • 我应该是自己找不开心。 因为你的一句话,又瞬间被击中。动弹不了。
    Mslow_CX阅读 1,625评论 0 0
  • 刚才清理了收藏夹,发现收藏过的东西要么就是看过后觉得以后用得上的,要么就是没看完,但觉得写得很好,留着再细细看的,...
    月月1991509阅读 1,592评论 0 0
  • 想写这篇文章已经想写很久了,做为一个大四的应届毕业生,在去年11月份结束实习后由于求职定位不明确以及简历没做好等一...
    SharonFang阅读 2,325评论 0 0