# Image (https://openknowledge.ai/docs/reference/components/img)

Image with click-to-zoom and HTML-native attributes

## Example

```md
![A short description](./path/to/image.png)
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `src` | `string` | yes |  | Image source URL |
| `alt` | `string` | yes |  | Alt text |
| `width` | `number` | no |  | Image width |
| `height` | `number` | no |  | Image height |
| `srcset` | `string` | no |  | Responsive image candidate set (e.g. "x.png 1x, y.png 2x") |
| `sizes` | `string` | no |  | Responsive image sizes hint paired with srcset |
| `loading` | `'eager' \| 'lazy'` | no | `lazy` | Native img loading strategy (defaults to lazy) |
| `title` | `string` | no |  | Native HTML title attribute (tooltip) |
| `decoding` | `'sync' \| 'async' \| 'auto'` | no | `auto` | Hint for how the browser should decode the image |
| `fetchpriority` | `'high' \| 'low' \| 'auto'` | no | `auto` | Resource fetch priority hint |
| `crossorigin` | `'anonymous' \| 'use-credentials'` | no |  | CORS mode for the image fetch |
| `referrerpolicy` | `string` | no |  | Referrer policy for the image fetch (HTML referrerpolicy values) |

*Also matches:* `image`, `zoom`, `picture`, `photo`

## Author it

Type `/image` in the editor to insert it from the slash menu, or write the tag directly in source mode. The Properties panel on the right of the editor exposes every prop above as a form field once the block is selected.