# AgentImage

**Slug:** `agent-image`  
**Import:** `import { AgentImage } from "@p4n/erc8004-ui"`

> **NOTE — unofficial library.** `@p4n/erc8004-ui` is an independent, community-built project. It is not affiliated with, maintained by, or endorsed by the authors of ERC-8004. It reads the standard's on-chain data through public subgraphs; it does not speak for the standard.

## Description

Renders the agent's registered image. Supports IPFS, HTTPS, and base64 sources. When no image is registered — or when the registered one fails to load — it falls back to an initials avatar in a colour derived from the agent's identity, and to the deterministic FingerprintBadge when the agent has no name either.

## Usage

```tsx
import { AgentImage } from "@p4n/erc8004-ui"
<AgentImage agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} />
```

## Examples

### Fallbacks

With no registered image, AgentImage renders the agent's initials on a colour derived from its registry and id — the same colour on every page and every reload. A registered image that fails to load (dead host, unreachable IPFS gateway, 404) falls through to the same chain rather than leaving a broken image in place. An agent with no registered name lands on the deterministic FingerprintBadge instead.

```tsx
// No usable image: initials avatar. No image and no name: FingerprintBadge.
<AgentImage agentRegistry="eip155:8453:0x8004...a432" agentId={888} />
```

### Circular Avatar

Use className to render as a circular avatar at a fixed size.

```tsx
<AgentImage
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  className="h-16 w-16 rounded-full overflow-hidden"
/>
```

## In Context

AgentImage in a profile header alongside name and verification badge.

```tsx
<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <div className="flex flex-col items-start gap-4 p-4 bg-neutral-900 border border-white/20 rounded-lg sm:flex-row sm:items-center">
    <AgentImage className="min-h-24 min-w-24" />
    <div className="flex min-w-0 flex-col gap-2">
      <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
        <AgentName />
        <VerificationBadge />
      </div>
      <AgentDescription />
    </div>
  </div>
</AgentProvider>
```

## API Reference

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `agentRegistry` | `string` | no | — | Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>. |
| `agentId` | `number` | no | — | ERC-721 token ID of the agent. Required unless inside an <AgentProvider>. |
| `className` | `string` | no | — | Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind). |
| `size` | `number` | no | `64` | Rendered width and height in pixels. Also sets the size of the initials avatar or FingerprintBadge fallback. |

## States

This component handles loading and error states internally with inline placeholders. No configuration needed.

## Reference

- Live preview & full docs: https://erc8004-ui.vercel.app/docs/components/agent-image
- Markdown source: https://erc8004-ui.vercel.app/docs/components/agent-image.md