PnPJS - MS Graph API - how to get group photo

Question

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

Answer 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