# Avatar

`Avatar` 元件是顯示使用者個人資料圖片的簡單方便方法。它可以根據使用者的去中心化識別碼 (DID) 自動產生獨特的頭像，或顯示來自指定 URL 的圖片。

此元件直接從 `@arcblock/ux` 函式庫重新匯出，確保在 ArcBlock 生態系統中擁有一致的外觀和感覺。

## 匯入

您可以透過以下方式從函式庫匯入 `Avatar` 元件：

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

## 用法

最常見的使用案例是顯示目前登入使用者的頭像。您可以從 `useSession` 掛鉤中獲取使用者資訊，並將其 DID 傳遞給 `Avatar` 元件。

```jsx User Profile Example 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>Loading user...</div>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={64} did={session.user.did} />
      <h3>{session.user.fullName || 'Anonymous User'}</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) 元件。