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

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

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

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

阅读 112.1k
6 个回答

可以用行内来实现

<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链接的方式放置你的背景图

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏