微信小程序不能直接加载本地静态图像作为背景的解决办法

1、背景图片设置可以用服务器上的图片。
2、将本地图片转成base64的。

wxml:

  <view class="title-top flex-row">
        <view class="pointsCur flex-col" style="background-image: url({
   
   { bgcImg1}});mode='scaleToFill'">
            <text class="points">295</text>
            <text>当前积分</text>
        </view>
        <view class="pointsConsu flex-col" style="background-image: url({
   
   { bgcImg2}});mode='scaleToFill'">
            <text class="points">0</text>
            <text>消费积分</text>
        </view>
    </view>

js:

   data: {
        currentTab: 0,
        userid: "ea508d7a-6bb6-431a-b752-ea11f5c4e050",
        points:[],

        // 背景
        bgcImg1:'/main/resource/jf1.png',
        bgcImg2:'/main/resource/jf2.png',
    },
    onLoad: function() {
        const that = this;
        //设置背景图片
        let base64Img1 = wx.getFileSystemManager().readFileSync(that.data.bgcImg1, 'base64');
        let base64Img2 = wx.getFileSystemManager().readFileSync(that.data.bgcImg2, 'base64');
        this.setData({
            bgcImg1: 'data:image/png;base64,' + base64Img1,
            bgcImg2: 'data:image/png;base64,' + base64Img2
        });
        that.getPointDetail()
    },

wxss:

.pointsCur,.pointsConsu{
    width: 340rpx;
    height: 200rpx;
    color: #fff;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
.pointsCur .points, .pointsConsu .points{
    font-size: 60rpx;
}

3. 在WXSS文件中直接使用base64转化后的背景图

background-image: url('data:image/png;base64,base64码'); /** 添加背景图片的*/

效果：