微信小程序背景图片无法在手机上显示

 

一：

将图片在网站上转换为base64格式，然后再设置    【将图片转换为base64网站】http://imgbase64.duoshitong.com/

 

.userInfo{
    width: 800rpx;      /*高宽大小根据个人情况自己调试*/
    height: 1150rpx;
    background-repeat:no-repeat; /** 不重复*/
    background-size:contain; /**等比例缩放*/
    background-image: url('data:image/png;base64,base64码');
}

二：

用JS的方式转换

wxml代码： 

<view class='userInfo' style='background-image: url({{background}});'>
    
  </view>

JS代码：

  data: {
    background: "/images/small.png",
  },
  onLoad: function () {
    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
    this.setData({
      'background': 'data:image/png;base64,' + base64
    });
}