Pnpjs: How to retrive the user photo, not the metadata

[StefanoCavallari]

Category

• [ ] Enhancement
• [ ] Bug
• [ X ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ 2.0.9 ]
Please specify what version(s) of SharePoint you are targeting: [ SP Online ]

Expected / Desired Behavior / Question

When calling 'await graph.me.photo()' it returns the metadata of the photo, but I don't know how to get the actual photo of the user.
I would like to get the response of the Graph call 'https://graph.microsoft.com/v1.0/me/photo/$value' that is returning the profile image of the user?
Thanks for the help.

[juliemturner]

This would be an enhancement which if you feel like adding would be great. In the mean-time you can do the following:

import { graph, GraphQueryable } from '@pnp/graph';
import { graphGet } from '@pnp/graph/operations';
let photoValue = graphGet(GraphQueryable(graph, "me/photo/$value"));

[StefanoCavallari]

Thanks for the invite to collaborate but I'm not sure I'm able to do it, I'm new to SP development.
I'm trying to use the code that suggested but it's giving me an error, 'Type '"me/photo/$value"' has no properties in common with type 'IFetchOptions'', probably related to the imports.
I'm importing graphGet as 'import {graphGet} from "@pnp/graph/operations";', is it correct or I'm importing a wrong library?
Thanks!!

[juliemturner]

Well two things.. I had a type, my mistake I've corrected it above...

But then second, I would need to look at this more because I forgot that this endpoint returns binary data... https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0#using-the-binary-data-of-the-requested-photo and so I need to just test it to figure out the exact use, but unfortunately do not have time to do so now.

[juliemturner]

Sigh... well... helps if I go look at the source. This is where we still need to do a lot of work with documentation and testing for the graph package and I'm still trying to get up to speed with what's in here that's not. So turns out there's a method for that it's just not documented.

import { graph } from '@pnp/graph';
import "@pnp/graph/users";
import "@pnp/graph/photos";

const photoValue = await graph.me.photo.getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("testElement").setAttribute("src", blobUrl);

You very much need to do the setAttribute in a better way but that gives you the general idea of what you're trying to attain.