时间戳

首页 > 解决方案 > 如何显示从 msal graph API 收到的二进制帐户图像？

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

问题描述

我可以通过使用查询 msal 图 api，https://graph.microsoft.com/v1.0/me/photo/$value但是一旦我得到基于 [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

标签： javascripthtmlvue.jsmsalmsal.js

解决方案

试试这个。

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

还可以在这里查看答案和评论

推荐阅读