PCF Component getting user profile pictures

[Ryan109]

Hi all, 

I have been working on PCF using react and fluent UI persona's. My aim is to have something I can put into a canvas app gallery and use the values from that to fill in the component. 

However, I am struggling to get anything useful from Office365Users.UserPhotoV2() as it seems to return an "appres" resource link. Does anyone have any suggestions for working with this? or if its not possible just let me know.

Thanks, 

Ryan 

[cchannon]

According to the documentation, the UserPhotoV2 should be returning you a binary for the image file content. BUT, I should also point out that the same documentation when addressing PowerApps specifically does not list this method, so it is not completely clear but possible that UserPhotoV2 is not yet intended for consumption from PowerApps.

That said, if you're able to hit it, maybe we can make it work anyway. The Fluent UI component is expecting a URI rather than the actual binary, so maybe your appres link is actually as designed. Have you tried just passing the resource link to fluent ui to see if it knows how to render it?

[cchannon]

<Edit: this post was a duplicate of the above>

[Ryan109]

Thanks for getting back to me so quick.

It is a bit  confusing because in the documentation it does say that it should be returning a binary of the image. However if you place it in a label in a gallery the actual response is something like the following:
Formula:

Response:

Unfortunately when I pass this to my PCF it comes up with the following error: 

So it seems that the my PCF cannot understand the URL scheme and is not able to actually get the image. 

It looks like something else is going on in the background to retrieve the actual blob URI. If you inspect a working user profile image in a gallery you will see a url like this: "blob:https://eu.create.powerapps.com/<unique id>". Unfortunately I am not sure how that's generated. 

Hope this makes sense if you have any questions just let me know. It may be that what I am trying to do just is not supported at the moment. 

[cchannon · Accepted solution]

Yeah, my guess is that the documentation omitting this call from the PowerApps specific page was not accidental and it is not yet intended for use there. But we can still recover. Have you tried the Graph API yet? it requires specific permissions, but you should be able to make simple GET calls to retrieve the binary of a photo and that URL might work inside your fluent UI component

Get photo - Microsoft Graph v1.0 | Microsoft Docs

The request would look something like: 
https://graph.microsoft.com/v1.0/users/{id | userPrincipalName}/photo

[Ryan109]

Yeah that's a great idea I think ill have a go at implementing the Graph api method instead. This will also give me user presence which is a bonus. 

Thanks a lot for your help!