How can I get the profile photo of a user type field of a SharePoint list?

Question

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
  .getByTitle('BD')
  .items
  .select("*", "collaborator/Title", "collaborator/EMail")
  .expand("collaborator")();

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
      .getByTitle('BD')
      .items
      .select("*", "collaborator/Title", "collaborator/EMail")
      .expand("collaborator")();
      
      setCollaborators(spCollaborators);
    }
    spGetBirthday().catch(() => {
      console.log('Error')
    })
  }, [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>
                  <h2>{collaborator.Title}</h2>
                  <span>Sales Manager</span>
                </li>
              </>
            )})
          ) : (
            <></>
          )}
        </ul>
      </div>
    </section>
  );
}

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