可以通过设置view的background或者background-image属性来实现:
<template>
<view class="content" :style="{background: 'url(https://blog.csdn.net/'+imageURL+')'}">
<!-- 如果是设置background-image则写成:<view class="content" :style="{backgroundImage: 'url(https://blog.csdn.net/'+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(https://blog.csdn.net/'+imageBase64+')'}">
</view>
</template>
<script>
export default {
data() {
return {
imageBase64: ''
};
},
onLoad() {
this.imageBase64 =
'data:image/png;base64,xxxxxxxxxxx='; //此处为图片对应的base64
}
}
</script>
博客介绍了在Uniapp中设置背景图片的方法。可通过设置view的background或background-image属性实现,实测支持本地图片。两者功能类似但有区别,如background-image可设置缩放,受键盘弹出影响,而background不受影响。还提到可用Base64方式展现图片。
2122

被折叠的 条评论
为什么被折叠?



