---
route: /components/image
menu: Components
---

import { Playground, Props } from 'docz';
import { Image } from './Image.tsx';

# Image

It displays an image within an mml attachment.

## Properties

<Props of={Image} />

## MML string

```xml
<mml>
  <image
    src="https://images.unsplash.com/photo-1577046847380-eaf32b2775d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
    alt="happy-new-year"
    title="Happy new year"
  />
</mml>
```

## Basic usage

<Playground>
  <MML
    source={`
    <mml>
      <image
        src="https://images.unsplash.com/photo-1577046847380-eaf32b2775d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
        alt="happy-new-year"
        title="Happy new year"
      />
    </mml>
  `}
  />
</Playground>