Avatar
A component for displaying user avatars that supports both image and fallback states. Implements intelligent loading strategies and fallback handling for optimal user experience.
Automatic and manual control over when the image renders
Universal fallback part if no image is available or it can't be loaded
Delay fallback rendering to avoid content flashing
Architecture
Reference
-
Root
The container component that manages the coordination between the image and fallback states. Handles the overall layout and positioning of the avatar system.
-
Attributes
- idstring/default: -
ID that is forwarded to the underlying HTML element for DOM manipulation.
-
-
-
Image
The image component that handles loading and rendering of the avatar image. By default, renders only when the image has successfully loaded.
-
Attributes
- altstring/default: -
Alternative text description of the image for accessibility purposes. Should provide a meaningful description of the avatar.
- cross-originstring/default: -
Configures the CORS behavior for the image request. Useful when loading images from different origins.
- idstring/default: -
ID that is forwarded to the underlying image element for DOM manipulation.
- referrer-policystring/default: -
Controls how the referrer information is passed when loading the image.
- srcstring/default: -
The URL of the avatar image to be displayed.
-
-
Events
- onLoadingStatusChange
Event handler called when the image loading status changes. Provides loading state information for implementing custom loading behaviors.
-
-
-
Fallback
The fallback component that renders during image loading or on error states. Supports delayed rendering to prevent content flashing.
-
Attributes
- idstring/default: -
ID that is forwarded to the underlying image element for DOM manipulation.
- render-delaynumber/default: 0
The time in milliseconds to delay the fallback rendering. Helps prevent unnecessary flashing of fallback content during quick image loads.
-
-