【微信小程序】不支持使用本地图片设置背景图片解决方法

在小程序样式文件中,如果设置背景图片的路径用的是本地的,就会报错并且显示不出来;如果在wxml文件中使用图片的本地路径作为背景图,则微信开发者工具中可以显示出来,但是运行到手机上显示不出来,解决方法如下:
#

方法一:

使用网络图片

background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center;

方法二:

在线搜索图片转Base64编码
http://www.jsons.cn/img2base64/

在这里插入图片描述

  background: url('data:image/png;base64,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') no-repeat center;

方法三:

使用<image/>标签

 <image src="/public/image/photo_sure.png" ></image>
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值