0

I have created an SPFx web part (no framework, SharePoint Online) which will show all the members of a given group. It displays their name, email, job title etc ...

Is it possible to show their profile picture?

If I open a browser to https://mysp.sharepoint.com/_layouts/15/userphoto.aspx?size=L&[email protected] it downloads the users profile picture. IS there a way to see it in the browser or should I try something else?

I had also tried https://sfeur.delve.office.com/mt/v3/people/profileimage?userId= but that doesn't work. (I got that advise from https://sharepoint.handsontek.net/2018/10/05/how-to-get-sharepoint-profile-picture/)

var client = await this.context.msGraphClientFactory.getClient('3');
var result = await client.api('groups/GUID').get();
for (let index = 0; index < result.value.length; index++) {
     stringToReturn += "    <img src='https://sfeur.delve.office.com/mt/v3/people/profileimage?userId=' + result.value[index].mail + '&size=L'>";
}
              

1 Answer 1

0

You can use this to get profile picture of users using Graph API. It will show profile picture stored in Azure AD which is requested by you.

Below is the sample code to achieve it:

import * as React from 'react';
import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IGraphApiCallProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  wpContext: WebPartContext;
}
interface IUser {
  userPrincipalName: string;
  id: string;
  displayName: string;
  imageSrc: Blob | null;
}
interface IGraphApiCallState {
  groupMembers: IUser[];
}
export default class GraphApiCall extends React.Component<IGraphApiCallProps, IGraphApiCallState> {
  constructor(props: IGraphApiCallProps) {
    super(props);
    this.state = {
      groupMembers: []
    }
  }
  async componentDidMount() {
    var client = await this.props.wpContext.msGraphClientFactory.getClient('3');
    var result = await client.api('groups/9907f913-04dc-48cc-8431-fc9f40dfa638/members').get();
    const groupMembers = new Array<IUser>();
    for (let index = 0; index < result.value.length; index++) {
      const element = result.value[index];
      groupMembers.push({
        id: element["id"],
        displayName: element["displayName"],
        userPrincipalName: element["userPrincipalName"],
        imageSrc: await this.getProfilePicture(element["id"])
      });
      await this.getProfilePicture(element['id']);
    }
    this.setState({ groupMembers: groupMembers });
    console.log(result);
  }

  async getProfilePicture(userId: string) {
    try {
      var client = await this.props.wpContext.msGraphClientFactory.getClient('3');
      var result = await client.api("users/" + userId + "/photo/$value").get();
      return result;
    } catch (error) {
      // User does not exist
    }
    return null;
  }
  public render(): React.ReactElement<IGraphApiCallProps> {
    return (
      <div>
        <table>
          <tr>
            <th>Name</th>
            <th>Profile Picture</th>
          </tr>
          {this.state.groupMembers.map(
            (user: IUser) => {
              return <tr>
                <td><label>{user.displayName}</label></td>
                <td>
                  <img src={user.imageSrc ? URL.createObjectURL(user.imageSrc) : this.props.wpContext.pageContext.web.absoluteUrl + "/_vti_bin/DelveApi.ashx/people/profileimage?size=S&userId=" + user.userPrincipalName} />
                </td>
              </tr>
            }
          )}
        </table>
      </div>
    );
  }
}

Below is the output of the code:

enter image description here

Microsoft also provides functionality to store profile picture at different application e.g. SharePoint User Profile, Delve, Outlook. If you want to show profile picture from those application then you don't need individual call for each user. Use link format mentioned in below reference link to do so.

Reference Link: https://sharepoint.handsontek.net/2018/10/05/how-to-get-sharepoint-profile-picture/

6
  • Thanks. Is it possible if I'm not using React? Commented Sep 8, 2022 at 14:02
  • 1
    yes.. it's possible. you just need to render <img src=""/_vti_bin/DelveApi.ashx/people/profileimage?size=S&userId={upn}" /> some how if you are not using React Commented Sep 8, 2022 at 14:15
  • Thanks. Do you know why I get images for some users and not for other users? Commented Sep 8, 2022 at 14:20
  • If profile image is not set for user then of course it will not be shown Commented Sep 8, 2022 at 15:35
  • If I go in to admin.microsoft.com I can see the users image. But some of them are not showing up if I do <img src=""/_vti_bin/DelveApi.ashx/people/profileimage?size=S&userId={upn}" /> Commented Sep 8, 2022 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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