0

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://learn.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0
entropy283
  • 85
  • 1
  • 2
  • 9
  • Does this answer your question? [Failed to execute 'createObjectURL' on 'URL':](https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url) – James Sep 13 '21 at 15:32
  • This does remove my error but it still does not display the image. I changed the type to image/jpeg but the blog url does not diplay a valid image. Thanks for your comment tho! – entropy283 Sep 13 '21 at 15:59
  • We need more code. How do you fetch the photo? Why is response.data necessary? `let blob = await client.api('/me/photo/$value').get()` should get you the blob. – tauzN Sep 13 '21 at 18:19
  • response.data give the binary of the image. it gives a similar binary response to what ```https://random.imagecdn.app/500/500``` returns. – entropy283 Sep 13 '21 at 18:23
  • the photo is being fetched by ```axios.get("https://graph.microsoft.com/v1.0/me/photos/48x48/$value", {``` but that should not matter. I am able to get the binary from the api but I am just not sure how to display it my webpage. – entropy283 Sep 13 '21 at 18:28
  • @entropy283 We need the code. `URL.createObjectURL` only works with a Blob. Something is wrong in your code. Show it please :) You need something like `(response) => response.blob()` – tauzN Sep 13 '21 at 18:40
  • Like I have been saying this is all the code but if you think it will help here it is: ```` 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); }); ``` – entropy283 Sep 13 '21 at 18:58
  • updated the question with the above code as well for better formatting – entropy283 Sep 13 '21 at 19:01
  • @entropy283 thanks for the code. You need to call `blob()` on the response. See my answer. – tauzN Sep 13 '21 at 19:04

3 Answers3

0

Give this a try.

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

Also check the answers and comments here

James
  • 20,957
  • 5
  • 26
  • 41
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);
});
tauzN
  • 5,162
  • 2
  • 16
  • 21
0

When making a request for blob data with Axios, you need to let it know via Request Configuration to expect a blob. This is similar to needing to call .blob() on the response when you make a similar request using fetch().

axios.get("https://graph.microsoft.com/v1.0/me/photos/48x48/$value", {
    headers: {
        Authorization: "Bearer <your_auth_token>"
    },
    responseType: 'blob',
})

Without specifying a responseType, passing Axios' response value to URL.createObjectURL() will throw TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed because it's not actually a blob at all!

n18l
  • 375
  • 1
  • 3
  • 6