如何显示从 msal graph API 收到的二进制帐户图像？答案

【问题标题】：How to display the binary account image received from msal graph API?如何显示从 msal graph API 收到的二进制帐户图像？
【发布时间】：2021-11-08 19:59:53
【问题描述】：

我可以使用https://graph.microsoft.com/v1.0/me/photo/$value 查询 msal 图 api，但是一旦我得到基于 [the documentation][1] 是二进制值的响应，我无法在我的 Vue 应用程序中实际显示它.我尝试使用 createObjectURL 制作一个 blob 并将其设置为 img 元素的 src 属性，如下所示：

const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(response.data);
document.getElementById("imageElement").setAttribute("src", blobUrl);

但我得到了错误：

TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

我得到这样的图像：

axios.get("https://graph.microsoft.com/v1.0/me/photos/48x48/$value", {
   headers: {
   Authorization: "Bearer " + "xxxxxxx" // this is the auth token
    }
})

.then(response => {
    const url = window.URL || window.webkitURL;
    const blobUrl = url.createObjectURL(response.data);
    document.getElementById("imageElement").setAttribute("src", blobUrl);
});
```


  [1]: https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0

【问题讨论】：

这能回答你的问题吗？ Failed to execute 'createObjectURL' on 'URL':
这确实消除了我的错误，但它仍然不显示图像。我将类型更改为 image/jpeg，但博客网址未显示有效图像。谢谢你的评论！
我们需要更多代码。你如何获取照片？为什么 response.data 是必要的？ let blob = await client.api('/me/photo/$value').get() 应该会为您提供 blob。
response.data 给出图像的二进制。它对https://random.imagecdn.app/500/500 返回的内容给出了类似的二进制响应。
axios.get("https://graph.microsoft.com/v1.0/me/photos/48x48/$value", { 正在获取照片，但这并不重要。我可以从 api 获取二进制文件，但我只是不确定如何在我的网页上显示它。

标签： javascript html vue.js msal msal.js

【解决方案1】：

试试这个。

yourImg.src = 'data:image/jpeg;base64, ' + Buffer.from(response.data, 'binary').toString('base64');

同时检查答案和 cmets here

【讨论】：

【解决方案2】：

您需要在回复时致电blob()：See this example

fetch("https://random.imagecdn.app/500/500").then(async response => {
  const url = window.URL || window.webkitURL;
  const blobUrl = url.createObjectURL(await response.blob());
  document.getElementById("imageElement").setAttribute("src", blobUrl);
});

【讨论】：