Avatar

Компонент Avatar предназначен для отображения визуального представления пользователя, объекта или сущности системы. В пользовательских интерфейсах аватары применяются для показа фотографий пользователей, иконок профилей, инициалов или символических изображений.

В библиотеке Element Plus компонент ElAvatar предоставляет гибкий и удобный инструмент для реализации подобных элементов интерфейса. Он поддерживает различные формы, размеры, типы источников изображения и дополнительные возможности кастомизации.

Основные области применения:

отображение профиля пользователя;
список участников;
комментарии и обсуждения;
панели пользователей;
элементы навигации;
карточки пользователей;
интерфейсы чатов и социальных платформ.

Базовое использование

Компонент ElAvatar может отображать изображение, иконку или текст. Наиболее распространённый вариант — использование изображения пользователя.

<template>
  <el-avatar src="https://example.com/avatar.jpg"></el-avatar>
</template>

Если указанный источник изображения доступен, компонент отображает его внутри круглой рамки.

Отображение текста

Если изображение не требуется, аватар может содержать текст. Чаще всего используются инициалы пользователя.

<template>
  <el-avatar>JS</el-avatar>
</template>

Текст автоматически центрируется внутри компонента.

Отображение иконок

Компонент поддерживает отображение иконок из библиотеки Element Plus Icons.

<template>
  <el-avatar :icon="UserFilled"></el-avatar>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
</script>

Такой вариант часто применяется в случаях, когда пользователь не загрузил фотографию профиля.

Размеры аватара

ElAvatar поддерживает несколько стандартных размеров.

Доступные варианты:

large
default
small

<template>
  <el-avatar size="large"></el-avatar>
  <el-avatar size="default"></el-avatar>
  <el-avatar size="small"></el-avatar>
</template>

Также допускается использование числового значения для задания размера в пикселях.

<template>
  <el-avatar :size="80"></el-avatar>
</template>

В этом случае ширина и высота компонента устанавливаются равными указанному значению.

Форма аватара

Компонент поддерживает две формы:

круглая (circle)
квадратная (square)

Круглая форма

Используется по умолчанию.

<template>
  <el-avatar src="avatar.jpg"></el-avatar>
</template>

Квадратная форма

<template>
  <el-avatar shape="square" src="avatar.jpg"></el-avatar>
</template>

Квадратные аватары часто применяются в административных панелях или системах управления.

Использование пользовательского цвета фона

Если аватар содержит текст или иконку, можно изменить цвет фона.

<template>
  <el-avatar style="background-color: #409EFF">
    A
  </el-avatar>
</template>

Это позволяет визуально различать пользователей или категории.

Обработка ошибок загрузки изображения

Если изображение по указанному src не может быть загружено, можно использовать обработчик события error.

<template>
  <el-avatar
    src="broken-link.jpg"
    @error="handleError"
  >
    U
  </el-avatar>
</template>

<script setup>
const handleError = () => {
  return true
}
</script>

Возврат true позволяет использовать содержимое слота как резервный вариант отображения.

Использование слотов

Слот позволяет полностью контролировать содержимое аватара.

<template>
  <el-avatar>
    <img src="avatar.jpg" />
  </el-avatar>
</template>

Такой подход используется при необходимости дополнительной логики или кастомизации.

Автоматическое масштабирование текста

Если текст слишком длинный, ElAvatar автоматически уменьшает размер шрифта, чтобы содержимое поместилось внутри контейнера.

<template>
  <el-avatar>USERNAME</el-avatar>
</template>

Это особенно полезно при отображении длинных инициалов или идентификаторов.

Аватары в группах

В интерфейсах часто требуется отображать несколько аватаров рядом. Для этого используется компонент ElAvatarGroup.

<template>
  <el-avatar-group>
    <el-avatar src="avatar1.jpg"></el-avatar>
    <el-avatar src="avatar2.jpg"></el-avatar>
    <el-avatar src="avatar3.jpg"></el-avatar>
  </el-avatar-group>
</template>

Компонент автоматически выстраивает аватары горизонтально.

Ограничение количества аватаров

ElAvatarGroup поддерживает параметр max, который ограничивает количество отображаемых элементов.

<template>
  <el-avatar-group :max="3">
    <el-avatar src="a1.jpg"></el-avatar>
    <el-avatar src="a2.jpg"></el-avatar>
    <el-avatar src="a3.jpg"></el-avatar>
    <el-avatar src="a4.jpg"></el-avatar>
    <el-avatar src="a5.jpg"></el-avatar>
  </el-avatar-group>
</template>

Если количество аватаров превышает значение max, последний элемент заменяется индикатором количества оставшихся.

Пример отображения:

[Avatar][Avatar][Avatar][+2]

Интервал между аватарами

Компонент ElAvatarGroup поддерживает настройку перекрытия элементов.

<template>
  <el-avatar-group :size="50">
    <el-avatar src="a1.jpg"></el-avatar>
    <el-avatar src="a2.jpg"></el-avatar>
    <el-avatar src="a3.jpg"></el-avatar>
  </el-avatar-group>
</template>

Перекрытие делает интерфейс компактным и визуально похожим на элементы социальных сетей.

Использование с динамическими данными

Аватары часто отображаются на основе данных из массива пользователей.

<template>
  <el-avatar-group>
    <el-avatar
      v-for="user in users"
      :key="user.id"
      :src="user.avatar"
    />
  </el-avatar-group>
</template>

<script setup>
const users = [
  { id: 1, avatar: 'a1.jpg' },
  { id: 2, avatar: 'a2.jpg' },
  { id: 3, avatar: 'a3.jpg' }
]
</script>

Такой подход применяется в списках участников, чатах и панелях команд.

Стилизация через CSS

Внешний вид аватара может быть дополнительно изменён с помощью CSS.

.custom-avatar {
  border: 2px solid #409EFF;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

<template>
  <el-avatar
    class="custom-avatar"
    src="avatar.jpg"
  />
</template>

Подобная стилизация используется для выделения активных пользователей или важных участников.

Использование в карточках пользователей

Аватар часто применяется в карточках профилей.

<template>
  <div class="user-card">
    <el-avatar :size="80" src="avatar.jpg" />
    <div class="info">
      <h3>John Smith</h3>
      <p>Frontend Developer</p>
    </div>
  </div>
</template>

Пример CSS:

.user-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

Такая структура широко применяется в административных панелях и CRM-системах.

Использование в комментариях

Компонент удобен для интерфейсов обсуждений.

<template>
  <div class="comment">
    <el-avatar src="avatar.jpg" />
    <div class="content">
      <strong>Alex</strong>
      <p>Отличная статья!</p>
    </div>
  </div>
</template>

CSS:

.comment {
  display: flex;
  gap: 12px;
}

Основные свойства компонента

Свойство	Тип	Описание
`src`	string	URL изображения
`size`	string / number	Размер аватара
`shape`	string	Форма (`circle`, `square`)
`icon`	component	Иконка для отображения
`src-set`	string	Альтернативные источники изображения
`alt`	string	Альтернативный текст изображения
`fit`	string	Поведение изображения

События компонента

Событие	Описание
`error`	вызывается при ошибке загрузки изображения

Практические рекомендации

Использование fallback-контента

Если изображение отсутствует, желательно показывать инициалы пользователя или иконку. Это предотвращает появление пустых элементов интерфейса.

Единый размер

В списках пользователей необходимо использовать одинаковый размер аватаров. Это улучшает визуальную структуру интерфейса.

Контраст текста

При использовании текстовых аватаров цвет текста должен контрастировать с фоном.

Использование групп

Группы аватаров хорошо подходят для отображения команд, участников проекта или онлайн-пользователей.

Оптимизация изображений

Фотографии профилей рекомендуется хранить в небольшом размере (например 128×128 px), чтобы избежать лишней загрузки данных.

Компонент ElAvatar является важным элементом визуальной идентификации пользователей в интерфейсах. Благодаря поддержке изображений, текста, иконок, группировки и гибкой стилизации он легко интегрируется в различные типы пользовательских интерфейсов: административные панели, социальные платформы, системы управления проектами и корпоративные приложения.