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:
