微信小程序展示动态背景图(含三目运算符)

一、微信小程序展示背景图片的类型

当在小程序开发中,本地的背景图片也是可以展示的,但是在真机运行的时候,必须使用base64格式或者是服务器上的图片才能显示。

给大家找了个在线图片转换链接:上传图片转换base64格式图片

二、语法书写

1、简单展示

在wxss文件中,对相应的容器进行添加背景图片

background-image: url("data:image/jpg;base64,/9j/4QAYRX....");
或者
background-image: url('https://img-market.csdnimg.cn/aicms/fission/1608260868727976.jpg')

我建议大家使用线上的地址更好些,当然这只是简单的显示,如果开发需要的话,肯定要动态的根据数据设置不同的背景图片

2、动态背景图片

style="background:{{safeData.score>89?'url('+urlheader+'/public/xcc/dp-1.png) no-repeat'
:safeData.score>79?'url('+urlheader+'/public/xcc/dp-2.png) no-repeat'
:'url('+urlheader+'/public/xcc/dp-3.png) no-repeat'}};
background-size: 360rpx 240rpx;color:#fff;"

safeData.score是分数的值,urlheader则是服务器ip地址

需要设置更多种类型的背景图片,就可以采用动态类书写了。

到此为止,微信小程序展示背景图片就完成了,大家学到了嘛~

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值