Uniapp设置页面的背景图片

可以通过设置view的background或者background-image属性来实现:

<template>
	<view class="content" :style="{background: 'url('+imageURL+')'}">
	<!-- 如果是设置background-image则写成:<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}"> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '/static/navigation/validCode_back.png'
			};
		}
	}
</script>

Uniapp论坛说不支持本地图片作为背景,但实测上述方法是支持的。background和background-image差不多,都能实现设置页面背景图,但两者略有区别。使用background-image时可以同时设置background-size: 100% 100%;来达到背景图缩放适应页面的功能,但对于background则无效。另外,当页面中会弹出键盘时,background-image会受到键盘弹出的影响(高度会缩小),但background不受影响。

另外,也可以对图片使用Base64方式展现:

<template>
	<view class="content" :style="{background: 'url('+imageBase64+')'}">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageBase64: ''
			};
		},
		onLoad() {
			this.imageBase64 =
				'data:image/png;base64,xxxxxxxxxxx='; //此处为图片对应的base64
		}
	}
</script>
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值