background 互联网图片_微信小程序 background-image设置背景图片不显示的解决办法...

微信小程序 将网络图片设置到background-image上能显示，相关代码如下：

微信小程序 将本地拍照/相机选择的图片设置到background-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属性,本地拍照/相机选择的图片都能显示。