Components / Media

Image

Component + manager

Renders an image with optional quick placeholder image, background blur, and loader, also dynamically calculates aspect ratio.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentImage

Managercreate_image_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Image, create_image_manager } from "sveltekit-ui"

  // Inline artwork keeps this example independent of image hosting.
  const artwork = (sky) => "data:image/svg+xml," + encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">' +
    '<rect width="640" height="360" fill="' + sky + '"/>' +
    '<circle cx="500" cy="90" r="42" fill="#fde68a"/>' +
    '<path d="M0 360 190 115 390 360ZM240 360 430 160 640 360Z" fill="#164e63"/></svg>'
  )

  const manager = create_image_manager({
    src: artwork("#bae6fd"),
    alt: "Mountain silhouettes beneath a sunny blue sky",
    image_width: 640,
    image_height: 360,
    border_radius: 1.5,
  })
</script>

<Image {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

15 entries in configuration

Property	Type	Default	Description
`storage_path`	`string`	`null`	a template path for retrieving an image by storage_id, e.g. '/api/storage/{storage_id}'
`selector_id`	`string`	`null`	optional identifier for referencing or targeting this image manager
`bg_img_blur`	`number`	`0`	the background blur radius in pixels for the placeholder image
`bg_img_opacity`	`number`	`0`	the background image's opacity (often used with blur)
`alt`	`string`	`null`	alt text for the image
`storage_id`	`string`	`null`	storage id to replace in storage_path, if no direct src is provided
`src`	`string`	`null`	the final url for the image; if null, tries to get from storage_path + storage_id
`storage_id_quick`	`string`	`null`	storage id for a quick/placeholder image
`src_quick`	`string`	`null`	a fast-loading low-res or placeholder image displayed behind and during loading
`image_width`	`number`	`null`	the image’s intrinsic width in px if known
`image_height`	`number`	`null`	the image’s intrinsic height in px if known
`image_aspect_ratio`	`number`	`null`	aspect ratio (width / height). if null, calculates once image loads
`display_max_width`	`number`	`800`	the maximum display width in px
`display_max_height`	`number`	`600`	the maximum display height in px
`border_radius`	`number`	`1`	the border radius (in rem) for the container