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>