vue将网络图片转base64

在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`变量中，并且在页面中显示图片。\[1\]
#### 引用[.reference_title]
- *1* *3* [vue中如何把网络上的图片通过base64显示出来](https://blog.csdn.net/qq_39648029/article/details/130385008)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue 图片转base64格式的方法](https://blog.csdn.net/miao_yf/article/details/128110788)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]