vue3 显示图片用base64

在 Vue 3 中，如果你想使用 base64 格式的图片数据来显示在页面上，可以这样做：

首先，在组件的模板部分（`.vue` 文件的 `template` 部分），创建一个 `<img>` 元素，并设置其 `src` 属性为 base64 代码：

<img :src="imageBase64String" alt="图片描述">

然后，在对应的 Vue 实例中，你可以定义一个 data 对象，将 base64 字符串赋值给一个变量，如 `imageBase64String`：

export default {
  data() {
    return {
      imageBase64String: 'your_base64_string_here',
    };
  },
};

如果你是从服务端获取的 base64 数据，可以在 computed 或 methods 中动态处理：

computed: {
  imageUrl() {
    // 如果从服务器获取了 base64 数据
    if (this.serverImage) {
      return `data:image/jpeg;base64,${this.serverImage}`;
    } else {
      return this.imageBase64String; // 如果本地有存储
    }
  },
},

或者直接在获取数据的地方更新这个属性：

async getImageFromServer() {
  const response = await fetch('your_api_url');
  const imageData = await response.blob();
  const base64Image = URL.createObjectURL(imageData);
  this.imageBase64String = base64Image;
}

记得在不需要时清除 `URL.createObjectURL()`，以避免内存泄漏：

beforeDestroy() {
  URL.revokeObjectURL(this.imageBase64String);
}