I am able to query the msal graph api by using https://graph.microsoft.com/v1.0/me/photo/$value but once I have the response, which based on [the documentation][1] is a binary value, I am unable to actually display this in my Vue app. I have tried using createObjectURL to make a blob and setting that as the src attribute of the img element like this:
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(response.data);
document.getElementById("imageElement").setAttribute("src", blobUrl);
but I get the error:
TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
I am getting the image like this:
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
You need to call blob() on the response: 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);
});