Products · Components
Image
A picture from your dot or from the web.
Set aspect to keep the space while the picture loads, and give it an alt for screen readers.
Children: Nothing
Example
<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 | 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 |