Image

Display images and placeholders with badges, actions, and preview entry points.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Image to show an image and its public loading and preview behavior. Prefer Avatar for identities, ImageGroup for multiple images, and ImageViewer for focused viewing.

Provide src and meaningful alt text. Attachments with as="icon" or as="badge" do not replace the image.
Configure previews with previewMode. ImageGroup can share size and preview policy across images; ImageViewer hosts the full viewer.

Import

import { Image } from '@snowui-design-system/components';

Usage

Preview modes

Sizes

Sources

Placeholder

Badge positions

Cover action

Disabled

API Reference

Property	Type	Default	Example	Description
`src`	`string \| Component`	`—`	`src={ExampleIcon}`	Image or video URL, or a resource-svelte image component.
`size`	`ImageSize`	`—`	`size={value}`	Image size. When omitted, inherits size context from ImageGroup automatically.
`alt`	`string`	`—`	`alt="Example"`	Alternative text for the image.
`mediaLoading`	`MediaLoading`	`—`	`mediaLoading={value}`	Native loading policy for string image URLs. Explicit values override the nearest provideMediaLoading() default; the fallback is lazy. Separate from Frame visual loading.
`previewMode`	`PreviewMode`	`—`	`previewMode={value}`	Explicit preview method. When omitted, uses a shared ImageViewer if one exists on the page; otherwise string media opens in a new window.
`onOpen`	`(event?: MouseEvent \| KeyboardEvent) => void`	`—`	`onOpen={(value) => { /* handle value */ }}`	Called when a click or keyboard action opens the image. Providing it takes over the default Viewer or new-window action; the caller must perform the opening behavior.
`badgePosition`	`"top" \| "bottom"`	`"top"`	`badgePosition="top"`	Corner badge position: top is upper right and bottom is lower right.
`children`	`Snippet`	`—`	`<Image>Content</Image>`	Media attachments. A child as="icon" is centered, while as="badge" is positioned at a corner. Neither replaces the media content.