A lightning:avatar component is an image that represents an object, such as an account or user. By default, the image renders in medium sizing with a rounded rectangle, which is also known as the square variant.
This component inherits styling from avatars in the Lightning Design System.
Use the class attribute to apply additional styling.
Here is an example.
<aura:component> <lightning:avatar src="/images/codey.jpg" alternativeText="Codey Bear"/> </aura:component>
To use an image in your org, upload it as a static resource in the Static Resources setup page. Use the {!$Resource.logo}" syntax in your src attribute, where logo is the name you provided in the Name field on the setup page.
Handling Invalid Image PathsThe src attribute resolves the relative path to an image, but sometimes the image path doesn't resolve correctly because the app is offline or the image has been deleted. To handle an invalid image path, you can provide fallback initials using the initials attribute. This example displays the initials "Sa" if the image path is invalid.
<lightning:avatar src="/bad/image/url.jpg" initials="Sa" fallbackIconName="standard:account" alternativeText="Salesforce"/>
In the previous example, the fallback icon "standard:account" is displayed if initials are not provided.
AccessibilityUse the alternativeText attribute to describe the avatar, such as a user's initials or name. This description provides the value for the alt attribute in the img HTML tag.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
alternativeText | String | The alternative text used to describe the avatar, which is displayed as hover text on the image. | Yes |
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
fallbackIconName | String | The Lightning Design System name of the icon used as a fallback when the image fails to load. The initials fallback relies on this for its background color. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed. | |
initials | String | If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. | |
size | String | The size of the avatar. Valid values are x-small, small, medium, and large. This value defaults to medium. | |
src | String | The URL for the image. | Yes |
title | String | Displays tooltip text when the mouse moves over the element. | |
variant | String | The variant changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square. |