How to create an <img> tag containing MSGraph photo/$value response BLOB

[carles1964]

I'm creating a Sharepoint Application (using Shrepoint Framework) and I'm not being able to retrieve the Pohto BLOB returned when calling MSGraph "/me/photo/$value" api. I don't know how to convert the BLOB into a Base64 string. I know that the responseraw.body is a readable stream, but don't know hot to access it and use as a SRC of a IMG tag. I have made many attempts, I'm writing one to explain what I'm trying to accomplish:

this.context.msGraphClientFactory .getClient()

    .then((client: MSGraphClient): void => {

         client.api('/me/photo/$value')

                .get((error, response: any, rawResponse?: any) => {

                      const blobUrl = window.URL.createObjectURL(rawResponse.body);

                      document.getElementById("myPhoto").setAttribute("src", blobUrl);

                 });

});

This code fails because creteObjectURL has been deprecated. The MSGraph call works, but I can't process the response. Any suggestions?

[#2]

Hi @carles1964,

Hope it's not too late. I ran into this issue yesterday and no matter what I tried I couldn't get the image BLOB.

In my case, I needed to get several images, so I switched to a single batch call. Turns out the image results come as base64 when you make a batch request, so that solved my problem. You can try to make a single request in a batch and try to get the result. It is not a perfect solution, but I hope it can solve your problem. Let me know if you need any help.