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

 效果图

 代码

    //网上随便找的图片
    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;
      });

最终长这样哈

 

优点：

1. 比base64小（简洁）
2. 比base64快
3. 比转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>