Thumbnail — Loidolt Theme

import { Thumbnail } from '@loidolt/theme-svelte';

Example

surface="paper" stays white in every theme so artwork previews read true.
Pass children instead of src for inline SVG or canvas content.
ratio also takes the named frames (photo, video, square, portrait, wide). While the image loads the frame shimmers; if it fails, fallback (or an empty frame that still carries the alt text) takes its place.
srcset and sizes serve responsive images; overlay layers a badge or duration over the corner.

Generated from the component source, so it cannot drift from the implementation.

Thumbnail props
Prop	Type	Default	Notes
`alt`	`string`	`''`	Required whenever `src` is set — decorative images should say so with `alt=""`.
`children`	`Snippet`	`—`	Alternative to `src` — inline SVG, canvas, anything that fills the frame.
`class`	`string`	`—`
`fallback`	`Snippet`	`—`	Shown if the image fails to load. Defaults to an empty frame.
`fit`	`'contain' \| 'cover'`	`'contain'`
`loading`	`'lazy' \| 'eager'`	`'lazy'`	`lazy` (the default) waits until the image nears the viewport.
`onerror`	`(event: Event) => void`	`—`
`onload`	`(event: Event) => void`	`—`
`overlay`	`Snippet`	`—`	Content over the image — a badge, a duration, a selection mark.
`ratio`	`AspectRatioName \| string \| number`	`'4/3'`	A named frame (`photo`, `video`, `square`…), a CSS aspect-ratio value, or a number.
`ref` bindable	`HTMLElement \| null`	`null`
`sizes`	`string`	`—`
`src`	`string`	`—`
`srcset`	`string`	`—`	Candidate sources for responsive images, with `sizes`.
`surface`	`'sunken' \| 'paper'`	`'sunken'`	`sunken` recesses into the page; `paper` stays white in every theme for artwork.

Plus the attributes of Omit<HTMLAttributes<HTMLElement>, 'children'>, forwarded to the root element.