element-plus/docs/en-US/component/avatar.md

---
title: Avatar
lang: en-US
---

# 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

:::demo

avatar/basic

:::

## Types

It supports images, Icons, or characters

:::demo

avatar/types

:::

## Fallback when image load error

fallback when image load error

:::demo

avatar/fallback

:::

## How the image fit its container

Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).

:::demo

avatar/fit

:::

## Attributes

| Attribute | Description                                                                                                            | Type               | Accepted Values                            | Default |
| --------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------ | ------- |
| icon      | set representation type to Icon, more info on Icon Component                                                           | string / Component |                                            |         |
| size      | set avatar size                                                                                                        | number / string    | number / large / default /small            | default |
| shape     | set avatar shape                                                                                                       | string             | circle / square                            | circle  |
| src       | the address of the image for an image avatar                                                                           | string             |                                            |         |
| srcSet    | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string             |                                            |         |
| alt       | This attribute defines an alternative text description of the image                                                    | string             |                                            |         |
| fit       | set how the image fit its container for an image avatar                                                                | string             | fill / contain / cover / none / scale-down | cover   |

## Events

| Event Name | Description                                                                    | Parameters |
| ---------- | ------------------------------------------------------------------------------ | ---------- |
| error      | handler when img load error, return false to prevent default fallback behavior | (e: Event) |

## Slots

| Name    | Description              |
| ------- | ------------------------ |
| default | customize avatar content |