我正在编写一个Vue应用程序，它使用Microsoft Graph API和SDK进行前端的初始身份验证，然后在整个应用程序中使用API的不同方面，如显示电子邮件、OneDrive文件等。
我正在使用用户Microsoft帐户中的个人资料照片向其他用户显示头像。问题是当我调用{graphApi}/me/photo/$value时，返回的结果是Blob。这是MS Graph中提供的终结点。
我已经彻底阅读了MS Graph文档，梳理了MDN和其他来源，但还没有找到一种方法来将此结果转换为我的标记中的简单图像。
模板标注：
<template>
<img :src="userPhoto" :alt="user.displayName" />
</template>设置功能逻辑：
<script setup>
import { client } from "./foobar"
const userPhoto = ref();
async function getPhoto(){
const photo = await client.api("/me/photo/$value").get()
console.log(photo.value)
userPhoto.value = photo
};
</script>返回结果：{Blob, image:{id: default, size:48x48}}
那么我如何正确地解码或下载Blob以在我的Vue标记中显示图像呢？我已经尝试了createObjectURL和FileReader()，但没有任何运气。我确信有一个简单的解决方案，但我没有找到它。感谢帮助。
1条答案
按热度按时间sz81bmfz1#
说明：
1.在下面的代码片段中，您可以看到我传递了先前从Graph中获取的Employee的
objectId。1.然后打电话给员工以获取其虚拟形象/DP
1.图形配置文件照片端点返回照片的二进制数据。
1.将该二进制数据转换为
data:image/png;base64,<readAsDataURL>URL，例如data:image/png;base64,iVBORw0KGgoAAAANSU...1.用于
<img src="dataUrl"/>