Puedo consultar la API del gráfico msal usando https://graph.microsoft.com/v1.0/me/photo/$value pero una vez que tengo la respuesta, que según [la documentación][1] es un valor binario, no puedo mostrar esto en mi aplicación Vue. Intenté usar createObjectURL para hacer un blob y configurarlo como el atributo src del elemento img de esta manera:
const url = window.URL || window.webkitURL; const blobUrl = url.createObjectURL(response.data); document.getElementById("imageElement").setAttribute("src", blobUrl);pero me sale el error:
TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
Estoy obteniendo la imagen como esta:
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.0Debe llamar a blob() en la respuesta: vea este ejemplo
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); });