小程序使用本地图片设置背景图

如果在wxml文件中使用本地路径图片作为背景图,在微信开发者工具中可以显示出来,但运行到手机上显示不出来,解决如下:

方法一( require 引入)

使用 require 引入本地图片,require方式获取的值可以直接生成base64格式

data中声明:imgBacUrl:require('@/static/images/风景.png'),

<view class="" :style="{'background': 'url('+ imgBacUrl +') no-repeat;background-size: 100%'}">
	<view class=""></view>
</view>

方法二(使用网络图片)

使用网络图片

background: url('https://img2.baidu.com/it/u=355673106,1614830790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500') no-repeat center;

方法三(使用在线转换工具)

使用在线转换工具

http://www.jsons.cn/img2base64/

方法四(使用< image />标签)

使用<image/>标签替换background
<image src="本地图片" ></image>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值