Components / Data display
Image
A fixed-ratio image frame with no layout shift and a placeholder shown until load and on error.
@ruckc/truss-ui Data display
Import
import { Image } from '@ruckc/truss-ui';Playground
src
ratio
fit
API
Also accepts every attribute of HTMLImgAttributes, applied to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
src required | string | — | Image URL. Falls back to initials if it fails to load. |
alt required | string | — | Required. Pass `""` only for purely decorative images. |
ratio | number | string | 16 / 9 | |
fit | 'cover' | 'contain' | 'cover' | |
loading | 'lazy' | 'eager' | 'lazy' | Shows a spinner and blocks interaction. |
placeholder snippet | Snippet | — | Shown until the image has loaded, and when it fails. Defaults to a Skeleton. |
class | string | '' |