made for Nordcraft

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

Example

Architecture

zcore-avatar-root
Slot: default
zcore-avatar-image
Slot: default
zcore-avatar-fallback
Slot: default

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

      • id
        string
        /
        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

      • alt
        string
        /
        default: -

        Alternative text description of the image for accessibility purposes. Should provide a meaningful description of the avatar.

      • cross-origin
        string
        /
        default: -

        Configures the CORS behavior for the image request. Useful when loading images from different origins.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying image element for DOM manipulation.

      • referrer-policy
        string
        /
        default: -

        Controls how the referrer information is passed when loading the image.

      • src
        string
        /
        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

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying image element for DOM manipulation.

      • render-delay
        number
        /
        default: 0

        The time in milliseconds to delay the fallback rendering. Helps prevent unnecessary flashing of fallback content during quick image loads.