有时候我们通过API接口获取图片时,拿到的是图片的数据流:有可能是二进制数据流,也可能是base64编码的数据流。
data: { captchaImage: '../../images/captcha.png', // 如果需要的话,可以给张默认的图片先 },
- 当获取到的是原始的图片二进制数据流时,只需要将image标签的src直接设置为图片url就可以,如:
var that = this var url = constants.WEB_SERVER_DOMAIN + '/getImage' console.log(url) that.setData ({ captchaImage: url, })
- 当获取到的是图片的base64编码的数据流时,需要将接口获取到的数据再解析base64编码,如:
wx.request({ url: constants.WEB_SERVER_DOMAIN + '/getImage', method: 'GET', header: { 'content-type': 'application/octet-stream', }, success: function (res) { //console.log(res.data) var data = res.data console.log(res.statusCode) if (res.statusCode == 200) { that.setData ({ captchaImage: 'data:image/png;base64,' + data, // data 为接口返回的base64字符串 }) } },
然后在wxml文件中,使用image标签,如:
<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>