---
title: "集成头像 UI 组件"
description: "将用户或实体的视觉表示集成到您的编辑器中。请在文档中了解更多信息。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/avatar"
---

# 集成头像 UI 组件

将用户或实体的视觉表示集成到您的编辑器中。请在文档中了解更多信息。

用户或实体的视觉表示，通常用于用户界面中来代表一个人。

> **Interactive demo:** [avatar](https://template.tiptap.dev/preview/tiptap-ui-primitive/avatar)

## 安装

您可以通过 Tiptap CLI 添加这个原始组件

```bash
npx @tiptap/cli@latest add avatar
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，可以从 [开源代码库](https://github.com/ueberdosis/tiptap-ui-components) 手动添加该组件。

### 导入样式

此组件要求您导入我们的样式，这些样式已添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 中。

## 用法

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="https://placehold.co/150" alt="用户头像" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  )
}
```

## 头像组

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <AvatarGroup maxVisible={3}>
      <Avatar>
        <AvatarImage src="/avatars/user1.png" alt="用户 1" />
        <AvatarFallback>U1</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user2.png" alt="用户 2" />
        <AvatarFallback>U2</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user3.png" alt="用户 3" />
        <AvatarFallback>U3</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user4.png" alt="用户 4" />
        <AvatarFallback>U4</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  )
}
```

## 属性

### 头像

| 名称   | 类型                        | 默认值       | 描述   |
| ---- | ------------------------- | --------- | ---- |
| size | 'default' \| 'sm' \| 'lg' | 'default' | 头像大小 |

### 头像图片

| 名称  | 类型     | 默认值 | 描述         |
| --- | ------ | --- | ---------- |
| src | string | 必需  | 图片源 URL    |
| alt | string | 必需  | 屏幕阅读器的替代文本 |

### 头像后备

| 名称      | 类型     | 默认值 | 描述              |
| ------- | ------ | --- | --------------- |
| delayMs | number | 0   | 显示后备内容之前的延迟（毫秒） |

### 头像组

| 名称         | 类型     | 默认值 | 描述             |
| ---------- | ------ | --- | -------------- |
| maxVisible | number | 未定义 | 在折叠之前显示的最大头像数量 |