Uniapp设置页面的背景图片

2024-07-18 00:20| 来源: 网络整理| 查看: 265

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

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

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

另外，也可以对图片使用Base64方式展现：

export default { data() { return { imageBase64: '' }; }, onLoad() { this.imageBase64 = 'data:image/png;base64,xxxxxxxxxxx='; //此处为图片对应的base64 } }

【本文地址】

公司简介

联系我们