头像 | ArcBlock

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

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

导入

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

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

用法

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

用户个人资料示例

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 的底层组件。以下是一些最常用的属性：

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 组件。