效果图

 代码

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐