uniapp 背景图

背景图须知

官网参考链接

使用本地路径背景图片需注意：

• 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
• 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
• 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径

注意：小程序不支持本地图片做背景图 仅仅支持 网络图片 和 base64(需要自己手动转) base64 小于40k 的图片会帮你转base64 大于 40k 不会转

在使用图片时可以对图片进行压缩 推荐网站 tinypng

动态输设置背景图

<view class="card" :style="{backgroundImage:`url(${packet_used2})`}"></view>

• 方式一、

import packet_used2 from '@/static/bonus/packet_used2.jpg'

data() {
	return {
		packet_used2: packet_used2
	}
}

• 方式二、

data() {
	return {
		packet_used2: reqire('@/static/bonus/packet_used2.jpg')
	}
}