# 头像

`Avatar` 组件是显示用户头像的一种简单便捷的方式。它可以根据用户的去中心化身份标识（DID）自动生成一个独特的头像，或者显示来自指定 URL 的图像。

该组件直接从 `@arcblock/ux` 库中重新导出，确保了 ArcBlock 生态系统中一致的外观和体验。

## 导入

你可以按如下方式从库中导入 `Avatar` 组件：

```javascript icon=logos:javascript
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
```

## 用法

最常见的用例是显示当前登录用户的头像。你可以从 `useSession` 钩子中获取用户信息，并将其 DID 传递给 `Avatar` 组件。

```jsx 用户个人资料示例 icon=logos:react
import React from 'react';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

export default function UserProfile() {
  const { session } = useSession();

  if (!session.user) {
    return <div>加载用户中...</div>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={64} did={session.user.did} />
      <h3>{session.user.fullName || '匿名用户'}</h3>
    </div>
  );
}
```

## 属性

`Avatar` 组件将其所有属性转发给来自 `@arcblock/ux` 的底层组件。以下是一些最常用的属性：

<x-field-group>
  <x-field data-name="did" data-type="string" data-required="false">
    <x-field-desc markdown>用户的 DID。如果提供，将生成一个独特的、基于区块的头像。这是为 DID 用户显示头像的首选方法。</x-field-desc>
  </x-field>
  <x-field data-name="src" data-type="string" data-required="false">
    <x-field-desc markdown>要显示的特定图像的 URL。如果同时提供了 `src` 和 `did`，`src` 将优先。</x-field-desc>
  </x-field>
  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
    <x-field-desc markdown>头像的尺寸（宽度和高度），单位为像素。</x-field-desc>
  </x-field>
  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
    <x-field-desc markdown>定义头像的形状。可以是 `circle` 或 `square`。</x-field-desc>
  </x-field>
  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
    <x-field-desc markdown>用于从 DID 生成头像的算法。常见值包括 `beam`、`pixel`、`ring` 等。</x-field-desc>
  </x-field>
  <x-field data-name="...rest" data-type="any" data-required="false">
    <x-field-desc markdown>任何其他标准的 HTML 属性，如 `className` 或 `style`，都可以传递给组件的根 `div` 元素。</x-field-desc>
  </x-field>
</x-field-group>

显示用户头像后，你可能还想显示他们的 DID 地址。请继续下一节，了解 [Address](./ui-components-address.md) 组件。