Image Showcase
Example
Example 2
Example 3
Example 4
Example 5 no src
No Image Src
Example 6
Example 7
Component Documentation
Component Name
Image
Builder Function Name
create_image_manager
Description
renders an image with optional quick placeholder image, background blur, and loader, also dynamically calculates aspect ratio
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| storage_path | string | a template path for retrieving an image by storage_id, e.g. '/api/v1/storage/{storage_id}' | |
| selector_id | string | 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 | alt text for the image | |
| storage_id | string | storage id to replace in storage_path, if no direct src is provided | |
| src | string | the final url for the image; if null, tries to get from storage_path + storage_id | |
| storage_id_quick | string | storage id for a quick/placeholder image | |
| src_quick | string | a fast-loading low-res or placeholder image displayed behind and during loading | |
| image_width | number | the image’s intrinsic width in px if known | |
| image_height | number | the image’s intrinsic height in px if known | |
| image_aspect_ratio | number | 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 |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| handle_mount | executes on svelte's onmount hook, checks if images are loaded, and sets their dimension info | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique internal id for this image instance |
| is_loading_main_image | boolean | indicates if the main high-res image is still loading |
| selector_id | string | optional external reference id for the image |
| src | string | the actual url used for the main image |
| src_quick | string | url for a quick-loading placeholder image |
| alt | string | alt text for the image |
| display_max_width | number | the maximum display width in px |
| display_max_height | number | the maximum display height in px |
| image_width | number | the actual image width in px after loading |
| image_height | number | the actual image height in px after loading |
| image_aspect_ratio | number | width / height of the image (calculated after load if not provided) |
| bg_img_blur | number | blur radius in px for the background placeholder |
| bg_img_opacity | number | opacity for the blurred background |
| bg_img_style | string | the background property used for the placeholder blur layer |
| border_radius | number | the border radius in rem for the container |
