uni-app(小程序)背景图片的处理出不来

解决方法:

  1. 使用网络图片,找个图床把你要用的图片传上去,然后以网络图片的形式引入到你的项目里面。比如qq空间,哈哈哈哈
  2. 使用使用<image/>标签,这个就不多说了,image作为背景,用绝对定位分隔图层出来就可以实现,可行但是我初衷还是想要用background的形式引入背景图片。
  3. 将图片转为base64,我用的是这个方法,网上有免费的在线转换器,比如:http://imgbase64.duoshitong.com/
    在这里插入图片描述上传图片,转换,复制得到的base64编码,然后粘贴到原来的background:url(base64编码)就可以了。                                    

集中处理base64编码的图片并引入

上一步用图片转成base64的编码很长,放在vue文件里非常不美观,还有就是我的Hbuilder编辑器滚动时会因此卡顿,所以为了可持续发展,早早的把这些base64编码变量抽离出来。

  1. 新建一个scss文件集中放这些base64编码图片

 

在这里插入图片描述

在uni.scss文件中导入这个自定义文件,作为预处理变量 

在这里插入图片描述

在vue文件里用相应的变量来引入图片 

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值