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

%3CLINGO-SUB%20id%3D%22lingo-sub-1073735%22%20slang%3D%22en-US%22%3EHow%20to%20create%20an%20%3CIMG%20%2F%3E%20tag%20containing%20MSGraph%20photo%2F%24value%20response%20BLOB%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1073735%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20creating%20a%20Sharepoint%20Application%20(using%20Shrepoint%20Framework)%20and%20I'm%20not%20being%20able%20to%20retrieve%20the%20Pohto%20BLOB%20returned%20when%20calling%20MSGraph%20%22%2Fme%2Fphoto%2F%24value%22%20api.%20I%20don't%20know%20how%20to%20convert%20the%20BLOB%20into%20a%20Base64%20string.%20I%20know%20that%20the%20responseraw.body%20is%20a%20readable%20stream%2C%20but%20don't%20know%20hot%20to%20access%20it%20and%20use%20as%20a%20SRC%20of%20a%20IMG%20tag.%20I%20have%20made%20many%20attempts%2C%20I'm%20writing%20one%20to%20explain%20what%20I'm%20trying%20to%20accomplish%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3Ethis.context.msGraphClientFactory%20.getClient()%20%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20.then((client%3A%20MSGraphClient)%3A%20void%20%3D%26gt%3B%20%7B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3Bclient.api('%2Fme%2Fphoto%2F%24value')%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20.get((error%2C%20response%3A%20any%2C%20rawResponse%3F%3A%20any)%20%3D%26gt%3B%20%7B%20%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20const%20blobUrl%20%3D%20window.URL.createObjectURL(rawResponse.body)%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20document.getElementById(%22myPhoto%22).setAttribute(%22src%22%2C%20blobUrl)%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%7D)%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CFONT%20face%3D%22terminal%2Cmonaco%22%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20code%20fails%20because%20creteObjectURL%20has%20been%20deprecated.%20The%20MSGraph%20call%20works%2C%20but%20I%20can't%20process%20the%20response.%20Any%20suggestions%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1073735%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Emsgraph%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Ephoto%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Ereadablestream%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EreadAsDataUrl%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1081597%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20create%20an%20%3CIMG%20%2F%3E%20tag%20containing%20MSGraph%20photo%2F%24value%20response%20BLOB%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1081597%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F327372%22%20target%3D%22_blank%22%3E%40carles1964%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHope%20it's%20not%20too%20late.%20I%20ran%20into%20this%20issue%20yesterday%20and%20no%20matter%20what%20I%20tried%20I%20couldn't%20get%20the%20image%20BLOB.%3C%2FP%3E%3CP%3EIn%20my%20case%2C%20I%20needed%20to%20get%20several%20images%2C%20so%20I%20switched%20to%20a%20single%20batch%20call.%20Turns%20out%20the%20image%20results%20come%20as%20base64%20when%20you%20make%20a%20batch%20request%2C%20so%20that%20solved%20my%20problem.%20You%20can%20try%20to%20make%20a%20single%20request%20in%20a%20batch%20and%20try%20to%20get%20the%20result.%20It%20is%20not%20a%20perfect%20solution%2C%20but%20I%20hope%20it%20can%20solve%20your%20problem.%20Let%20me%20know%20if%20you%20need%20any%20help.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

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?

1 Reply

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.