# 头像

一个带有后备方案的图像元素，用于表示用户。

## Features

- 对图像渲染时机的自动和手动控制。

- 后备部分接受任何子元素。

- 可以选择延迟后备渲染以避免内容闪烁。

## [解剖结构](#解剖结构)

导入所有部分并将它们组合在一起。

```jsx
import { Avatar } from "radix-ui";

export default () => (
  <Avatar.Root>
    <Avatar.Image />

    <Avatar.Fallback />
  </Avatar.Root>
);
```

## [API 参考](#api-参考)

### [根元素](#根元素)

包含头像的所有部分。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

### [图像](#图像)

要渲染的图像。默认情况下，它仅在加载完成后渲染。如果您需要更多控制，可以使用 `onLoadingStatusChange` 处理程序。

| Prop                    | Type       | Default          |
| ----------------------- | ---------- | ---------------- |
| `asChild`               | `boolean`  | `false`          |
| `onLoadingStatusChange` | `function` | No default value |

### [后备](#后备)

在图像未加载时渲染的元素。这意味着在加载时或如果出现错误。如果您在加载期间注意到闪烁，可以提供 `delayMs` 属性来延迟其渲染，以便仅在连接较慢的情况下渲染。要获得更多控制，请在 `Avatar.Image` 上使用 `onLoadingStatusChange` 处理程序。

| Prop      | Type      | Default          |
| --------- | --------- | ---------------- |
| `asChild` | `boolean` | `false`          |
| `delayMs` | `number`  | No default value |

## [示例](#示例)

### [可点击的头像与工具提示](#可点击的头像与工具提示)

您可以将头像与 [工具提示](/primitives/docs/components/tooltip) 组合，以显示额外的信息。

```jsx
import { Avatar, Tooltip } from "radix-ui";

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Avatar.Root>…</Avatar.Root>
    </Tooltip.Trigger>

    <Tooltip.Content side="top">
      工具提示内容
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
);
```

<!--$-->

<!--/$-->