img标签渲染图片流

最新推荐文章于 2025-03-18 16:44:23 发布

问问那只猫

最新推荐文章于 2025-03-18 16:44:23 发布

阅读量6.1k

点赞数 1

分类专栏： vue 文章标签： javascript vue.js

本文为博主原创文章，转载请注明本文链接。 https://home.cloudn.me/aff.php?aff=11525&gid=11

本文链接：https://blog.csdn.net/sunny_desmond/article/details/115520935

版权

axios blob Base64 动态图片路径 URL.createObjectURL

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用axios处理动态生成的图片流，通过设置responseType为'blob'，然后转换为URL对象，以便于在img标签中显示。具体步骤包括获取blob、转换为URL并展示。

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

图片流

有时候服务端返回的一张图片是一串文件流，而文件流无法直接加在 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);
        });