Image

An <img> that holds its space, shows a ThumbHash while it loads, fades in when decoded, never shows the browser's broken-image glyph, and swaps to a dark variant with the theme.

The theme is the one that applies here, not the OS setting: an app that pins color-scheme on the root, or a panel that sets it on a subtree, gets its dark image too. Before hydration the choice is a <picture> media query, so the server-rendered page already fetches only the right file; after it, a one-pixel sensor reads light-dark() and follows whatever flips it.

Feedback

<script lang="ts">
	import { Image } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
src	string	—	Image URL. Without one, only the placeholder shows.
darkSrc	string	—	Used instead of src under a dark theme.
srcset	string	—	Responsive candidates, as on <img>. Pair with sizes.
darkSrcset	string	—	Candidates for a dark theme. Only the matching set is ever fetched.
alt required	string	—	Describes the image. Empty string means decorative. Required on purpose.
thumbhash	ThumbHash	—	Placeholder while loading and behind a failure. Base64 or raw bytes.
darkThumbhash	ThumbHash	—	The dark variant's placeholder. Falls back to thumbhash.
ratio	number	—	Width over height, reserved before load. Defaults to width/height, then the thumbhash's.
fit	Fit	'cover'	How the image fills the box when the ratios differ.
priority	boolean	false	Above the fold: load eagerly with high fetch priority instead of lazily.
selectable	boolean	true	False stops the image being selected with the surrounding text.
fallback	Snippet	—	Shown if the image fails. Defaults to an icon over the placeholder.
class	string	—	Merged with the component's own classes, last — so yours win.

Everything not listed above is spread onto the underlying element (HTMLImgAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<!-- Loaded: the night scene under a dark theme. -->
<Image
	src={day}
	darkSrc={night}
	thumbhash={dayHash}
	darkThumbhash={nightHash}
	alt="Rolling hills under the sky"
	class="rounded-lg"
/>
<!-- Still loading: the ThumbHash holds the space. -->
<Image thumbhash={dayHash} darkThumbhash={nightHash} alt="" class="rounded-lg" />
<!-- Failed: the placeholder stays, with an icon rather than a broken glyph. -->
<Image src="/missing.jpg" thumbhash={dayHash} darkThumbhash={nightHash} alt="Hills" class="rounded-lg" />

Feedback · Badge · Alert · Progress · Spinner · Skeleton · Toaster · Avatar

---

← All components · Getting started · Theming · source