在微信小程序的网络请求图片文件中,返回的图片并不是我们想象中放上去就可以显示的,返回回来的是一组二进制数据,我们需要base64转换后方可使用,下面总结一下请求图片文件数据的正常流程:
一、image图片控件处理
我们平常的本地图片或网络图片只需要如下即可显示:
<image src="{{imgUrl}}"></image>
而图片文件则是要如下处理(固定格式):
<image src="data:image/png;base64,{{imgUrl}}"></image>
二、请求代码处理
请求类型需要设置为arraybuffer,后面接收到的data要使用base64处理成可显示的形式
wx.request({
url: url,
method: 'GET',
// dataType: 'json',
responseType: 'arraybuffer', //将原本按文本解析修改为arraybuffer
success: function(res) {
this_.setData({
imgUrl: wx.arrayBufferToBase64(res.data)
})
}
})