Image
An image. Give alt (or decorative: true). Per-frame sources: src: (m: 'a.jpg', w: 'a@2x.jpg').
Also written Img; layr format rewrites these to Image.
A cover image
Image shows a picture. Give it alt text (or decorative: true when it adds nothing for a screen reader). fit says how it fills its box: cover crops to fill, contain shows all of it. Images load lazily unless you set lazy: false.
Column(
.config(w: 320, gap: 10)
Image(
.config(
w: fill
h: 170
alt: 'The LAYR link-preview card'
cornerRadius: 14
fit: cover
src: '/og.png'
)
)
Text(
.config(size: 13, color: muted)
.obj('fit: cover crops the picture to fill the box.')
)
)A round avatar
Row(
.config(gap: 12, yAlign: mid)
Image(.config(size: 48, alt: 'LAYR', cornerRadius: 999, src: '/icon-512.png'))
Column(
Text(.config(weight: semibold) .obj('LAYR'))
Text(.config(size: 13, color: muted) .obj('@dynshift'))
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
src | src | Image URL, or one per frame. | |
alt | txt | Text alternative for screen readers. | |
decorative | bool | Purely decorative: hidden from assistive technology. | |
fit | cover | contain | fill | none | scaleDown | cover | How the image fills its box. |
position | align | mid | Focal point when cropped. |
lazy | bool | true | Load when near the viewport. |
w (width) | len | fill | hug | Width: a length, fill (share the remaining space) or hug (fit content, default). | |
h (height) | len | fill | hug | Height: a length, fill or hug (default). | |
size (s) | size | Width and height together: size: 200 or size: (200, 120). | |
minW (minWidth) | len | Minimum width. | |
maxW (maxWidth) | len | Maximum width. | |
minH (minHeight) | len | Minimum height. | |
maxH (maxHeight) | len | Maximum height. | |
aspect (aspectRatio) | num | Aspect ratio (width / height), e.g. 16/9. | |
cornerRadius (radius) | radius | Corner radius. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Events
.on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.