微信小程序背景图显示不出来

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

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

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

···回复：

可以用行内来实现

<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里好像只能放网络地址...，我也是头一次摸....

···回复：

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

···回复：

<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%;

}

这样就好了图片描述

···回复：

display：block或者display：inline-block

···回复：

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

···回复：

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

以上是 微信小程序背景图显示不出来 的全部内容， 来源链接： utcz.com/a/10845.html

回到顶部