问题:

调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。

解决:

1、先设置axios接收参数格式为"arraybuffer":

responseType:'arraybuffer'

2、转换为base64格式图片数据在img标签显示:

return 'data:image/png;base64,' + btoa(
    new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
  );

返回的string直接放在img标签src可直接显示

3、完整代码:

Html:

<img ref="code" :src="CodeImgSrc" alt="">

js:

//获取验证码
    async getCode(){
      this.veriUUID = Date.parse(new Date());
      this.$axios({
          method:'get',
          url:'/conch-authority/common/getVerifyCode',
          params: {veriUUID:this.veriUUID},
          responseType:'arraybuffer'
      })   
      .then(res => {              
          this.CodeImgSrc=`data:image/png;base64,${btoa(new Uint8Array(res.data).reduce((data,byte)=>data+String.fromCharCode(byte),""))}`;
      })        
      .catch(err => {            
          reject(err.data)        
      }) 
      
    },

这样图片就就是base64格式,就可以直接在页面展示了

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐