# Image (/docs/products/dash-dots/reference/components/image)

Set `aspect` to keep the space while the picture loads, and give it an `alt` for screen readers.

**Children:** Nothing

## Example

![The Image component](/assets/images/dash-dots/components/image.webp)

```xml title="view.dml"
<Image src="statics/photo.jpg" alt="A photo" aspect="16:9" fit="cover" shape="rounded" />
```

## Props

| Prop     | Type                                                                        | What it is                                                                                                                                                  |
| -------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src`    | `string`                                                                    | A picture in the dot's `statics/` folder, such as "statics/photo.jpg", an https address on a host in `network.hosts` in `dot.json`, or a `DotFile`'s `url`. |
| `alt`    | `string`                                                                    |                                                                                                                                                             |
| `width`  | `number`                                                                    |                                                                                                                                                             |
| `height` | `number`                                                                    |                                                                                                                                                             |
| `fit`    | `cover`, `contain`                                                          | `cover` fills the box and crops. `contain` shows the whole picture. Default: `cover`.                                                                       |
| `shape`  | `rounded`, `square`, `circle`                                               | Default: `rounded`.                                                                                                                                         |
| `aspect` | [aspect ratio](/docs/products/dash-dots/reference/components#aspect-ratios) | The box's shape. Without a width, the picture fills the width it's given, such as the screen's, and its height follows.                                     |

## Events

| Event     | Sends                           | Notes                       |
| --------- | ------------------------------- | --------------------------- |
| `onLoad`  | `{ width, height }` in `detail` | The image's size in pixels. |
| `onError` | `{ message }` in `detail`       |                             |

> **Note:** Setting `aspect` makes `height` pointless: the aspect sets the height. The build warns when both are set.