效果图

 代码

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐