I am developing a Webpart with react and to get data from my Sharepoint I am using PnP js

Objective: Get the profile photo of a user-type field of a Sharepoint list

Problem description: I have a list called "BD" which has a field called colaborador that is of type user, I want to get the name, email and profile photo of the colaborador field, so far I have only managed to get the name and the email, but I have not been successful with the profile photo, I am trying with the following code:

const spCollaborators = await sp.web.lists
  .select("*", "collaborator/Title", "collaborator/EMail")

Here my complete code:

import * as React from 'react';
import { IAppCumpleanosProps } from './IAppCumpleanosProps';
import { spfi, SPFx } from '@pnp/sp'
import styles from './AppCumpleanos.module.scss';
import { useEffect, useState } from 'react';
import '@pnp/sp/webs';
import '@pnp/sp/lists';
import '@pnp/sp/items';

export default (props: IAppCumpleanosProps) => {
  const { context, top } = props;

  const sp = spfi('https://name.sharepoint.com/').using(SPFx(context));

  const [collaborators, setCollaborators] = useState<any[]>([])
  useEffect(() => {
    const spGetBirthday = async () => {
      const spCollaborators = await sp.web.lists
      .select("*", "collaborator/Title", "collaborator/EMail")
    spGetBirthday().catch(() => {
  }, [top])
  return (

    <section className={styles.cumpleSection}>
      <div className={styles.wrapper}>
        <ul className={styles.carousel}>
          {collaborators ? (
            collaborators.map((collaborator) => {
            return (
                <li className={styles.card}>
                  <div className={styles.img}><img src={require('../assets/images/img-1.jpg')} draggable="false"/></div>
                  <span>Sales Manager</span>
          ) : (

1 Answer 1


You can set your image src like this:

<img src={`${context.pageContext.web.absoluteUrl}/_layouts/15/userphoto.aspx?UserName=${collaborator.EMail}&size=L`} draggable="false"/>

The size parameter can be L, M, or S


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.