[Vuejs]-How to display the binary account image received from msal graph API?

by

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

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);
});

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!

Leave a comment