适用情况

当后端直接返回一个数据流的图片（而不是直接的图片路径），需要前端渲染到页面上，比如验证码或者其他任何需要直接展示的图片，像下面这样。

当然我在网上也看了一些方法，下面的是我结合网上大佬和适用的情况总结的方法，实际情况还是要以各位当时为主。

方法

原生ajax进行数据流转换

关于这种方式，首先我们需要借助ajax对象的responseType属性来设置转换请求响应的数据类型，然后再通过window的URL对象的createObjectURL()方法，将响应数据转换成URL对象，然后将该对象赋值给img的src属性即可正常显示图片了。代码如下：

//请求图片的方法
getDiagram() {
      // 暂存this对象
      const that = this;
      // 获取window的URL对像 并做好浏览器兼容性处理
      const windowUrl = window.URL || window.webkitURL;
      // 创建 xhr
      const xhr = new XMLHttpRequest();
      // 验证码请求地址
      const url = `/property/flowable/task/diagram?processId=${that.auditData.processInstanceId}`;
      // 打开连接
      xhr.open("GET", url, true);
      // 设置响应数据的类型 blod是将响应数据转换成二进制数据的Blob对象
      xhr.responseType = "blob";
      // 发送请求
      xhr.send();
      xhr.onload = function () {
        if (this.status === 200) {
          console.log('this',this);
          const blob = this.response;
          // 将响应数据转换成url对象 赋值给src变量 传递给img
          that.src = windowUrl.createObjectURL(blob);
        }
      };
    },

当写到这里出现了一个报错，是提示我没有权限，那就需要给该请求设置一个请求头，添加上权限

然后加上了一段添加请求头的代码：

// 设置请求头，这里是添加了token，用到了自己写的两个方法，具体根据实际项目来
      xhr.setRequestHeader("Authorization", getTokenType() + " " + getToken());

但是值得注意的是这里添加请求头位置要在打开链接open之后，发送请求send之前，因为之前我试了放在其他位置不行。

效果

好了，到这里就差不多完成图片的渲染了，效果如下：

前端关于渲染数据流图片的问题

适用情况

方法

原生ajax进行数据流转换

效果