uni-app设置页面的背景图片

￡神魔★判官ぃ 2023-06-15 07:22 3阅读 0赞

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

<template>
        <view class="content" :style="{background: '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>

原文地址：[https://blog.csdn.net/pucker/article/details/90475788][https_blog.csdn.net_pucker_article_details_90475788]

[https_blog.csdn.net_pucker_article_details_90475788]: https://blog.csdn.net/pucker/article/details/90475788