美文网首页
显示二进制图片数据

显示二进制图片数据

作者: iStudyBoy | 来源:发表于2020-03-24 20:21 被阅读0次

在微信小程序的网络请求图片文件中,返回的图片并不是我们想象中放上去就可以显示的,返回回来的是一组二进制数据,我们需要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)

    })

  }

})

相关文章

网友评论

      本文标题:显示二进制图片数据

      本文链接:https://www.haomeiwen.com/subject/rvmayhtx.html