MS Graph people search, show images on Persona Card?

[tabit01]

I am trying to understand the MS Graph people search sample. The sample is running just fine on our live Sharepoint tenant, but I struggle to understand one thing.

I notice that the Persona cards by default show initials in the coin. No profile photos are ever shown in this coin.

When I hover and trigger a Live Persona Card, this card loads a profile image (if existing) almost immediately.

My understanding is that the Persona card needs an image URL to load an image, eventually an extra MS Graph call to load an image. I fail to see either.

In _LivePersonaCard I tried debugging by

        onCardOpen: () => {
          console.log('LivePersonaCard Open');
          console.log('processed props:', processedProps)
          console.log('.this props:', this.props)
        },

and just to make sure the hosted workbench loads the local latest code, also in PersonaCard.ts:

    return <Persona {...persona} 
      showInitialsUntilImageLoads = {false}
      imageInitials = 'XY'
      imageShouldStartVisible = {true}
      size={24} />;

I am starting to suspect that the image loaded in LivePersonaCards is some "automagic" happening in the background. Can anyone offer a better explanation?

[tabit01]

I found out the LivePersonaCard is loaded as a specific component from the SPFx shared library

  private async _loadSpfxSharedLibrary() {

    if (!this.state.isComponentLoaded) {

        try {

            this.sharedLibrary = await SPComponentLoader.loadComponentById(LIVE_PERSONA_COMPONENT_ID);   

            this.setState({
                isComponentLoaded: true
            });

        } catch (error) {
           Log.error(`[LivePersona_Component]`, error, this.props.serviceScope);
        }
    }        
}

As an alternative to this webpart, I recommend trying the MS Graph toolkit, specifically the mgt-get method.