How to display circular or square photo of a user in lightning - Salesforce Globe For You

Solution: Use lightning-avatar component to display an image and set the variant attribute to 'circle' to display circular image or 'square' to display a rectangular image.

Example:

public class DisplayUserPhotoController {

    @AuraEnabled

    public static List<User> getUsers() {

        List<User> lstUser = new List<User>();

        lstUser = [Select id,name,SmallPhotoUrl,FullPhotoUrl from User Limit 5];

        return lstUser;

    }

}

displayUserPhotoInLWC.html

<template>

    <lightning-card title="List Of Users">

        <template for:each={lstUser} for:item="objUser">

            <div key={objUser.Id} class="slds-p-bottom_xx-small">

                <lightning-avatar src={objUser.SmallPhotoUrl} variant="circle" alternative-text={objUser.Name} key={objUser.Id}>

                </lightning-avatar> {objUser.Name}

            </div>

        </template>

    </lightning-card>

</template>

displayUserPhotoInLWC.js

import { LightningElement,api } from 'lwc';

import getUsers from '@salesforce/apex/DisplayUserPhotoController.getUsers';

export default class DisplayUserPhotoInLWC extends LightningElement {

    @api lstUser = [];

    connectedCallback() {

        getUsers()

        .then(result => {

            if(result){

                this.lstUser = result;

            }

        })

        .catch(error => {

            this.error = error;

        });

    }

}

displayUserPhotoInLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: