前端二进制流（blob）转图片

虚拟中的神

已于 2022-05-07 13:44:59 修改

阅读量1.7w

点赞数 4

文章标签：前端 vue.js javascript

于 2022-05-07 12:40:38 首次发布

本文链接：https://blog.csdn.net/m0_60067716/article/details/124628391

版权

这篇博客介绍了如何通过Blob对象加载和显示网络图片，强调了这种方法相比Base64编码更小、更快且过程更简单的优点。示例代码展示了在Vue应用中，如何通过axios获取图片二进制流并转换为Object URL来显示图片。

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

效果图

代码

    //网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      })
      .then((res) => {
        console.log(res.data, "二进制流");
        const objectURL = URL.createObjectURL(res.data);
        this.imgSrc = objectURL;
      });

最终长这样哈

优点：

比base64小（简洁）
比base64快
比转base64过程简单

完整代码

<template>
  <div class="app">
    <img :src="imgSrc" alt="图片" />
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      imgSrc: "",
    };
  },
  mounted() {
    //网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      })
      .then((res) => {
        console.log(res.data, "二进制流");
        const objectURL = URL.createObjectURL(res.data);
        console.log(objectURL);
        this.imgSrc = objectURL;
      });
  },
};
</script>