Vue应用中如何将Microsoft Graph返回的Blob转为图片显示？

核心问题排查 #

你之前尝试createObjectURL和FileReader失败，大概率是没有给Graph SDK指定响应类型，导致返回的不是标准Blob对象，而是SDK包装后的响应结构。以下是两种可行的解决方法：

方法一：使用URL.createObjectURL（推荐，内存更友好） #

这种方式生成临时URL指向Blob，性能更优，注意组件卸载时要清理URL避免内存泄漏：

<template>
  <img :src="userPhoto" :alt="user.displayName" />
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { client } from "./foobar"

const userPhoto = ref(null);
// 保存临时URL用于后续清理
const tempImageUrl = ref(null);

async function getPhoto(){
  try {
    // 必须指定responseType为blob，确保返回标准Blob对象
    const photoBlob = await client.api("/me/photo/$value").responseType('blob').get();
    // 创建临时URL
    tempImageUrl.value = URL.createObjectURL(photoBlob);
    userPhoto.value = tempImageUrl.value;
  } catch (error) {
    console.error("获取头像失败:", error);
    // 失败时设置默认头像
    userPhoto.value = "/assets/default-avatar.png";
  }
};

// 组件卸载时清理临时URL，释放内存
onUnmounted(() => {
  if (tempImageUrl.value) {
    URL.revokeObjectURL(tempImageUrl.value);
  }
});
</script>

方法二：使用FileReader转Base64 #

如果偏好Base64格式（无需清理，但大图片会占用更多内存），可以用这种方式：

<template>
  <img :src="userPhoto" :alt="user.displayName" />
</template>

<script setup>
import { ref } from 'vue'
import { client } from "./foobar"

const userPhoto = ref(null);

async function getPhoto(){
  try {
    const photoBlob = await client.api("/me/photo/$value").responseType('blob').get();
    const reader = new FileReader();
    // 读取完成后将Base64赋值给userPhoto
    reader.onload = (e) => {
      userPhoto.value = e.target.result;
    };
    reader.readAsDataURL(photoBlob);
  } catch (error) {
    console.error("获取头像失败:", error);
    userPhoto.value = "/assets/default-avatar.png";
  }
};
</script>

关键注意点 #

1. 必须指定responseType('blob')：Graph SDK默认不会自动解析响应为Blob，显式设置后才能拿到标准的Blob对象。
2. 避免错误访问photo.value：你的原代码中console.log(photo.value)是错误的，因为API返回的直接是Blob（不是响应式对象），不需要加.value。

内容的提问来源于stack exchange，提问作者Tim