Avatar | ArcBlock

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

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

匯入

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

import Avatar from '@arcblock/did-connect-react/lib/Avatar';

用法

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

User Profile Example

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 的底層元件。以下是一些最常用的屬性：

did string — 使用者的 DID。如果提供，將會產生一個獨特的、基於區塊的頭像。這是顯示 DID 使用者頭像的首選方法。
src string — 要顯示的特定圖片的 URL。如果同時提供了 src 和 did，則 src 會優先。
size number (default: 40) — 頭像的尺寸（寬度和高度），單位為像素。
shape 'circle' | 'square' (default: 'circle') — 定義頭像的形狀。可以是 circle 或 square。
variant string (default: 'beam') — 用於從 DID 產生頭像的演算法。常見值包括 beam、pixel、ring 等。
...rest any — 任何其他標準 HTML 屬性，如 className 或 style，都可以傳遞給元件的根 div 元素。

顯示使用者頭像後，您可能還想顯示他們的 DID 地址。請前往下一節了解 Address 元件。