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

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

当在小程序开发中，本地的背景图片也是可以展示的，但是在真机运行的时候，必须使用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地址

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

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