3

I am using PnPJS for MS Graph API to retrieve groups information in SPFx solution. I am able to get the groups information properly. I need to get the group photo also, since photo is not available in the first request while getting the groups info, I am doing one more call. But I am not sure how to use this returned object as image. I am doing as below

private getGroupPhoto(groupId:string):Promise<any>{
   return this.props.graphContext.groups.getById(groupId).photo.get().then((k)=>{
    return k;
   }) as Promise<any>;
  }

Above code is returning me below output

@odata.context: "https://graph.microsoft.com/v1.0/$metadata#groups('339492f5-c1cb-4b1e-904e-d39099601f12')/photo/$entity"
@odata.mediaContentType: "image/jpeg"
@odata.mediaEtag: ""59E3A994""
height: 648
id: "648X648"
width: 648

How to use this as image in html?

Edited: When I use the photo.getBlob method then output as follows enter image description here

1

You can use the getBlob method to get the image bytes as blob and then bind that to the HTML element somewhat as below. If you know a different way, you can use that as well:

private getGroupPhoto(groupId:string):Promise<any>{
   return this.props.graphContext.groups.getById(groupId).photo.getBlob().then((k)=>{

    let groupPhotoUrl = window.URL || window.webkitURL;
    let blobUrl = groupPhotoUrl.createObjectURL(k);
    document.querySelector("#image").src = blobUrl;

   }) as Promise<any>;
  }

or as below:

private getGroupPhoto(groupId:string):Promise<any>{
   return this.props.graphContext.groups.getById(groupId).photo.getBlob().then((k)=>{

    var arr = new Uint8Array(k);

        //  Don't use fromCharCode.apply as it blows the stack with moderate size images
        var raw = "";
        for (var i = 0; i < arr.length; i++) {
            raw = raw + String.fromCharCode(arr[i]);
        }
        var b64 = window.btoa(raw);
        var blobUrl = "data:image/jpeg;base64," + b64;
        document.querySelector("#image").src = blobUrl;

   }) as Promise<any>;
  }

Reference - Microsoft Graph REST API - Get photo

Embed Group Photo from Microsoft Graph API into Web page

| improve this answer | |
  • what is url object here? you mean window.URL? – Mihir Jun 24 '19 at 18:45
  • yes, thats correct – Gautam Sheth Jun 24 '19 at 18:46
  • check edited post as well for 2nd alternative and check this link as well ! – Gautam Sheth Jun 24 '19 at 18:48
  • first option was worked. createObjectURL did magic. I didn't know this. This is working fine in local workbench, this will work for production version also right! – Mihir Jun 24 '19 at 18:58
  • 1
    Yes will work on prod as well – Gautam Sheth Jun 24 '19 at 19:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.