# Image

> Displays an image with optional alt text.

**URL:** https://inference.sh/docs/agents/widgets/image
**Last updated:** 2026-09-18

---

Displays an image with optional alt text.

## Preview

```
┌─────────────────┐
│                 │
│     [image]     │
│                 │
└─────────────────┘
```

## Usage

```go
node := models.WidgetNode{
    Type: models.WidgetNodeTypeImage,
    Src:  "https://example.com/image.png",
    Alt:  "Description of the image",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"image"` | Node type | required |
| `src` | `string` | Image URL | required |
| `alt` | `string` | Alt text for accessibility | `""` |

## Examples

### Basic Image

```go
{
    Type: models.WidgetNodeTypeImage,
    Src:  "https://example.com/chart.png",
    Alt:  "Sales chart for Q4 2024",
}
```

### Generated Image

```go
{
    Type: models.WidgetNodeTypeImage,
    Src:  generatedImageURL,
    Alt:  "AI-generated landscape",
}
```

### Image with Caption

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeImage, Src: imageURL, Alt: "Product photo"},
        {Type: models.WidgetNodeTypeText, Value: "Figure 1: Product overview", Variant: "muted"},
    },
}
```

### Image Gallery (Row)

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeImage, Src: img1, Alt: "Option A"},
        {Type: models.WidgetNodeTypeImage, Src: img2, Alt: "Option B"},
        {Type: models.WidgetNodeTypeImage, Src: img3, Alt: "Option C"},
    },
}
```

## Styling

Images are styled with:

```css
.image {
  border-radius: 0.375rem; /* rounded-md */
  max-width: 100%;
  height: auto;
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "image",
  src: "https://example.com/image.png",
  alt: "Description",
}
```

## Best Practices

1. **Always include alt text** - Essential for accessibility
2. **Use HTTPS URLs** - Ensure images load securely
3. **Optimize image size** - Use appropriately sized images
4. **Host images reliably** - Use CDN or reliable hosting