Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or characters.

Basic

use shape and size prop to set avatar's shape and size

Types

It supports images, Icons, or characters

Fallback when image load error

fallback when image load error

How the image fit its container

Set how the image fit its container for an image avatar, same as object-fit.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
iconset representation type to Icon, more info on Icon Componentstring
sizeset avatar sizenumber/stringnumber / large / medium / smalllarge
shapeset avatar shapestringcircle / squarecircle
srcthe address of the image for an image avatarstring
srcSetA list of one or more strings separated by commas indicating a set of possible image sources for the user agent to usestring
altThis attribute defines an alternative text description of the imagestring
fitset how the image fit its container for an image avatarstringfill / contain / cover / none / scale-downcover

Events

Event NameDescriptionParameters
errorhandler when img load error, return false to prevent default fallback behavior(e: Event)

Slots

NameDescription
defaultcustomize avatar content