微信小程序中设置background背景图片不显示的问题

最近在做我司的小程序开发,再给组件设置背景图片,引用的是本地图片,微信开发者工具中没有问题,可在真机中跑就不行了,代码如下:

.img-background {
  background: url('../../beauty.png');
  width: 200rpx;
  height: 160rpx;
}

原谅我是小白啊(确实是小白,之前一直做安卓开发,不过对前端很有兴趣,嘿嘿!现在努力准备开一下前端的小飞机!!!)

搜索一番,找到了解决方案,在此记录下:有如下两种
1、图片直接引用网络图片

.img-background {
  background: url('http://xx/xx/beauty.png');
  width: 200rpx;
  height: 160rpx;
}

2、把本地的图片base64下,直接引用这个base64后字符串

.img-background {
  url(data:image/png;base64,VCdweSsd98iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m) no-repeat;
  width: 200rpx;
  height: 160rpx;
}

个人认为:小程序对大小有限制,可能某些背景图片会很大吧,会更容易造成超过大小限制吧,给个在线转base64

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值