【微信小程序】background-image设置背景图片不显示的解决办法

相关代码如下：

<image class="imgBox" style="background-image:url('http://ymzp.0633hr.com/upload/app/2019-08-02/1564730097202-2019-08-02.png')" >
</image>

微信小程序 将本地拍照/相机选择的图片设置到background-image上是不能显示的。

<image class="imgBox" style="background-image:url('http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.ZtvcPNdqMc41f2dc8918f6a22cbecb7102e0cd2c3f6e.png')" >
</image>

解决办法1：使用wx.getFileSystemManager将本地拍照/相机选择的图片转成base64格式,设置到background-image上。

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], //  可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //  可以指定来源是相册还是相机，默认二者都有
    success: function(e) { // 选择图片成功
      console.log("本次选择图片" + JSON.stringify(e.tempFilePaths));
      var baseImg = "";
      wx.getFileSystemManager().readFile({
        filePath: e.tempFilePaths[0], // 选择图片返回的相对路径
        encoding: 'base64', // 编码格式
        success: res => { // 转码成功的回调
          baseImg = 'data:image/png;base64,' + res.data;
          console.log('data:image/png;base64,' + res.data);
          // 后续的逻辑处理
          ...
          ...

        }
      })
    },
    fail: function(error) {
      console.error("调用本地相册文件时出错")
      console.warn(error)
    },
    complete: function() {

    }
  })

打印base64的log如下：

data:image/png;base64,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

解决办法2：弃用background-image赋值的方式，改用image组件的src属性,本地拍照/相机选择的图片都能显示。

<image class="imgBox" mode="aspectFill" src="http://tmp/wx1e4dd12766f1b015.o6zAJs15FvORcBqF5xfEIJgbuAKI.ZtvcPNdqMc41f2dc8918f6a22cbecb7102e0cd2c3f6e.png">
</image>

作者：CoderZb
链接：https://www.jianshu.com/p/69d5fe48339d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。