微信小程序将图片数据流添加到image标签中

最新推荐文章于 2025-03-11 18:09:01 发布

OliveLao

最新推荐文章于 2025-03-11 18:09:01 发布

阅读量4.5w

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/OliveLao/article/details/78136121

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何处理API返回的图片数据流，包括二进制数据流和Base64编码的数据流，并展示如何将其正确显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们通过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字符串
          })
        }
      },

注意：上面解析base64时，在数据流前面加上 data:image/png;base64, (注意是有个“,”) 。 image/png改为对应的图片类型，如 image/gif, image/jpg等。

然后在wxml文件中，使用image标签，如：

<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>