---
title: "<Image>"
description: "A responsive image, optionally wrapped in a link."
url: https://www.unitpost.com/components/image
section: Components
updated: 2026-07-14
---
# <Image>

## <Image>

> A responsive image, optionally wrapped in a link.



```tsx
<Image src="https://www.unitpost.com/web-app-manifest-192x192.png" alt="Logo" width={120} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | url | — | Image URL (use an absolute, hosted URL). |
| `alt` | string | — | Alternative text (shown if the image can't load). |
| `href` | url | — | Make the image a link to this URL. |
| `width` | number | — | Container (frame) width in px. The image scales to fill it; defaults to full content width. |
| `height` | number | — | Optional frame height in px. By default the height adapts to the image's aspect ratio — set this to pin an explicit height. |
| `objectFit` | enum | — | How the image fills the frame when a height is set: cover (crop), contain (letterbox), or fill (stretch). Client support varies. |
| `backgroundColor` | color | — | Frame background shown around the image when “contain” leaves gaps. |
| `borderRadius` | number | — | Corner rounding in px. |
| `align` | enum | center | Horizontal alignment. |
| `border-width` | number | — | Frame border stroke width (px). |
| `border-style` | enum | — | Frame border stroke style. |
| `border-color` | color | — | Frame border stroke color. |

## Related

- [<Divider>](https://www.unitpost.com/components/divider): A thin horizontal rule to separate sections.
- [<Spacer>](https://www.unitpost.com/components/spacer): Fixed vertical whitespace (a reliable cross-client gap).
- [<Markdown>](https://www.unitpost.com/components/markdown): Author rich copy in Markdown — compiled to email-safe HTML.