img标签渲染图片流

图片流

有时候服务端返回的一张图片是一串文件流，而文件流无法直接加在 img 标签上进行渲染，如下：

哦豁，有点蛋疼了吧。

这时候请求的链接其实就是当前图片的路径。

但是我们的图片路径往往是通过网络请求出来的，它是动态的。
这时候可以试试这个。

axios 解决

通过在 axios 添加responseType: "blob",将当前的请求变成blob这时候就能得到如下

然而由于是 blob格式的 我们依然无法直接将返回结果直接放在img标签进行展示。
这时候我们还需要window.URL.createObjectURL(res.data);将当前的blob转化一下，如图

axios 示例

request({
        url: API.getQrCode,
        method: "get",
        responseType: "blob",
      })
        .then((res) => {
        
          if (res.data.size < 100) {
            this.$message({
              showClose: true,
              center: true,
              message: "生成二维码失败！",
              type: "error",
            });
            this.qrCode = "";
            return;
          }
          this.qrCode = window.URL.createObjectURL(res.data);
        })
        .catch((err) => {
          this.qrCode = "";
          console.log(err);
        });