Avatar

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 implements styling from avatars in the Lightning Design System.

Use the class attribute to apply additional styling.

Here is an example.

1<aura:component>
2  <lightning:avatar src="/images/codey.jpg" alternativeText="Codey Bear" />
3</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.

The src attribute resolves the relative path to an image, but sometimes the image path doesn’t resolve correctly because the user 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.

1<lightning:avatar
2  src="/bad/image/url.jpg"
3  initials="Sa"
4  fallbackIconName="standard:account"
5  alternativeText="Salesforce"
6/>

In the previous example, the fallback icon “standard:account” is displayed if initials are not provided.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The latest Lightning Design System resources become available only when the new release is available in your org.

Use 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.