微信小程序的背景图要怎么显示？

Question

开发小程序的时候，设置页面的背景，我用到css代码：

.page__bd{
    width: 100%;
    height: 220px;
    background: url('../../assets/img/images.jpg') no-repeat;
    background-size: 100% 100%;
}

在调试工具上是显示的，但是扫面上传到手机上却显示不出来，谁遇到过这样的问题？

Answer 1

可以用行内来实现

<view class="warp" style="background-image: url('../../images/welcome.png')">

</view>

上面这个在“开发工具”中能显示，但是用手机预览的时候就不出图，所以下面：
以欢迎页面来说：

wxml:

<!-- welcome.wxml -->
<view bindtap="goHome" class="warp">
    <image src="../../images/welcome.png"></image>
    <text>{{ countDownNumber }}</text> <!-- 倒计时 -->
</view>

css:

page {
    height: 100%;
}
.warp {
    height: 100%;
    position: relative;
}

.warp image {
    width: 100%;
    height: 100%;
}

.warp text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 46%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5)
}

js:

//welcome.js
//获取应用实例
const app = getApp();

Page({

    /**
     * 页面的初始数据
     */
    data: {
        countDownNumber: 5,
        timerId: 0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var page = this;

        //倒计时关闭当前页，重定向到首页
        var timer = setInterval(function(){
            page.setData({
                countDownNumber: page.data.countDownNumber - 1
            });
            if (page.data.countDownNumber == 1) {
                clearInterval(timer);
                wx.switchTab({
                    url: '../index/index'
                })             
            }            
        },1000);
        page.setData({
            timerId: timer
        })
    },

    /**
     * 触击“欢迎页面”直接重定向到首页
     */
    goHome: function(e){
        //清空计时器
        clearInterval(this.data.timerId);
        //关闭当前页，重定向到首页
        wx.switchTab({
            url: '../index/index'
        })
    }

})

这么着“开发工具”与预览都没问题，线上没试过，它这css里好像只能放网络地址...，我也是头一次摸....

Answer 2

background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

Answer 3

<view class="userinfo">
//这里放背景图
<image class='userBg' src='../../../images/my_bg.jpg'></image>

<view class='userContent'>

<view class="userinfo-avatar" background-size="cover"><open-data type="userAvatarUrl"></open-data></view>

<open-data type="userNickName" class="userinfo-nickname"></open-data>
</view>
</view>
//样式部分
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
height: 250rpx;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #333;
}
.userContent{
position: absolute;
z-index: 1;
}
.userBg{
width: 100%;
height: 100%;
}

这样就好了

Answer 4

display：block或者display：inline-block

Answer 5

我也纳闷了好久的问题，才发现用iamge标签可以加载本地图片，但背景图片用网络图片或者base64的才能在手机端显示。涨姿势

Answer 6

css 中只能用base64或者是url链接的方式放置你的背景图