如何给小程序页面加载一张背景图片

我们知道,在PC端,想在一个页面插入一张背景图,只需要如下属性即可。

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

在小程序里面,如此做法就行不通了,图片不但不会显示而且还会报错了

pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

图片.png

很多人都会有这样的一种感受,在一边学习一遍做项目的过程中,总会遇到很多坑,今天给大家填坑,如何给小程序页面插入一张背景图。 参考了一下小程序的参考手册:https://www.w3cschool.cn/weixinapp/weixinapp-qa.html

在网上浏览了一遍,找到了几个比较靠谱的解决方案,简单方便。

解决方案:

解决方法一:

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

1:用工具连接服务器

图片.png

2:将桌面的图片拖入指定服务器文件夹底下

3:得到图片网络连接,添加到代码中,则可以显示背景图片

图片.png

解决方法二:

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

1:打开在线图片转换平台

图片.png

2:将桌面的图片导入,生成base64编码

图片.png

3:将第三方平台编译过后的base64编码复制到wxss里面

// Base64 在wxss中的使用
page{
  background-image: url(""data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");
}

4:效果如下:

图片.png

缺点就是,这一大串编码太占用我们的代码空间了,鼠标要拖动许久许久,难免产生视觉疲劳。

下一章,小程序的图片的使用教程

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

注意!让你无法拒绝的新版公众平台文章编辑器来啦!

运营微信公众号的小伙伴登陆微信公众平台后,以为进错了后台! ↓↓↓ ? 右下角的编辑器竟然居中了! (处女座开心哭了) 原来是微信公众平台新版正式上线了!对此,...

29490
来自专栏韩东吉的Unity杂货铺

零基础入门 12: 移动端播放视频功能实现

前两篇分享了Unity编辑器模式下Image的使用以及通过脚本控制和创建Image,今天来分享一篇Image的另外一个延伸用法。

36630
来自专栏本立2道生

电脑护眼设置:蓝色光波过滤

本人高度近视,因此平时使用电脑时总会关注如何护眼,安卓手机上使用了app “蓝色光波过滤”,感觉不错,就想看看PC上有没有相应的软件,找倒是找到了,不过需要先安...

12110
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

45490
来自专栏极乐技术社区

小灯灯实战系列《二》微信小程序:仿今日头条(上)

写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变。因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章《记一次小程序开发过程》中,灯...

42080
来自专栏数据小魔方

经历过绝望之后,选择去知乎爬了几张图~

本来今天要跟大家分享怎么批量爬取2016年各大上市公司年报的,可是代码刚写了开头,就发现年报这玩意儿,真的不太好爬,还以为自己写的姿势不对,换了好几个网站。 眼...

30140
来自专栏Material Design组件

Human Interface Guidelines — Switches

14940
来自专栏诸葛青云的专栏

微信跳一跳脚本重出江湖,python实现安卓&iOS自动版与手动版!

前面一段时间在GitHub上看到有人利用Python玩一款名为“跳一跳”的微信小程序,于是打算自己也来试一试,毕竟这款小游戏最近吸引了众多人的目光。

21300
来自专栏Java3y

浅谈CDN、SEO、XSS、CSRF

CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN。 CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时...

56050
来自专栏古时的风筝

最简单的数据抓取教程,人人都用得上

这么简单的工具当然对环境的要求也很简单了,只需要一台能联网的电脑,一个版本不是很低的 Chrome 浏览器,具体的版本要求是大于 31 ,当然是越新越好了。目前...

66380

扫码关注云+社区

领取腾讯云代金券