Displaying Initials as Fallback When Avatar Image Fails to Load

Environment

Product

Progress® Kendo UI® for Angular Avatar

Description

How to display initials dynamically in Avatar component?

This Knowledge Base article also answers the following questions:

• How can I implement error handling for images in the Avatar component?
• Is it possible to display initials in the Avatar when the image source is broken?
• What is the best practice for using a fallback mechanism in the Avatar component?

Solution

To display initials as a fallback in the Avatar component when an image fails to load, you can set the both initials and imageSrc properties dynamically based on a boolean value:

html

<kendo-avatar
    [initials]="failedToLoadImage ? userInitials : null"
    [imageSrc]="failedToLoadImage ? null: userImage">
</kendo-avatar>

This way, if the image fails to load you can update the boolean flag and the Avatar displays the user's initials, specified by userInitials, instead of the image.

See Also

• Avatar Overview
• Avatar Types
• Feature Request for Error Event Handler