@neynar/ui/llm-docs/avatar-image.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# AvatarImage

**Type**: component

AvatarImage - The image element component for displaying avatar pictures This component renders the actual avatar image and automatically handles loading states. It's built on Radix UI's Avatar.Image primitive which provides robust image loading behavior - when the image fails to load or is still loading, it remains hidden and the AvatarFallback will be displayed instead. ## Key Features - **Automatic loading state management**: Handles "idle", "loading", "loaded", and "error" states - **Graceful error handling**: Automatically falls back when images fail to load - **Proper aspect ratio maintenance**: Square aspect ratio maintained by default - **Flexible rendering**: Supports asChild for custom element composition - **Loading status callbacks**: Provides onLoadingStatusChange for custom loading logic - **Accessible implementation**: Proper alt text handling and ARIA support ## Loading States The component automatically manages these states: - **idle**: Initial state before loading begins - **loading**: Image is currently being loaded - **loaded**: Image has loaded successfully and is displayed - **error**: Image failed to load, fallback will be shown

## JSX Usage

```jsx
import { AvatarImage } from '@neynar/ui';

<AvatarImage
  src="value"
  alt="value"
  className="value"
  onLoadingStatusChange={handleLoadingStatusChange}
  asChild={true}
/>
```

## Component Props

### src
- **Type**: `string`
- **Required**: No
- **Description**: The URL of the image to display. Can be relative or absolute URL. When src changes, loading will restart

### alt
- **Type**: `string`
- **Required**: No
- **Description**: Descriptive alternative text for the image. Should describe the person or entity, not just "avatar" or "profile picture"

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to apply to the image element. Applied to the img element or asChild component

### onLoadingStatusChange
- **Type**: `(
    status: "idle" | "loading" | "loaded" | "error",
  ) => void`
- **Required**: No
- **Description**: Optional callback fired when the loading status changes. Receives status: "idle" | "loading" | "loaded" | "error"

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Change the default rendered element for the one passed as a child, merging their props and behavior