在Vue中,您可以使用fetch()函数从网络上获取图像,并将其转换为Base64字符串以在页面上显示。以下是一个示例代码:

<template>
  <div>
    <img v-if="imageData" :src="imageData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null
    };
  },
  mounted() {
    this.fetchImage();
  },
  methods: {
    async fetchImage() {
      const response = await fetch("https://example.com/image.jpg");
      const blob = await response.blob();
      const reader = new FileReader();
      reader.onloadend = () => {
        this.imageData = reader.result;
      };
      reader.readAsDataURL(blob);
    }
  }
};
</script>

在这个示例中,组件在挂载时调用了fetchImage()函数来从“https://example.com/image.jpg”获取图像并将其转换为Base64字符串。一旦转换完成,组件会将Base64字符串储存在`imageData`变量中,并且在页面中显示图片。

Logo

前往低代码交流专区

更多推荐