Image

Tips & examples

A image display viewport with support for direct uploads, storage path resolution, custom URL expressions, click-to-expand full size previews, frame borders, and image fitting modes.

When to use

Displaying static or dynamic images sourced from internal storage, uploaded files, or external URLs.
Presenting visual assets with fit scaling controls (e.g., scale to fit, adjust to width/height, stretch) and full-size click-to-expand preview capabilities.

What you need

Image URLs, relative storage paths, file system asset keys, or custom dynamic image expressions.

Examples

A profile overview tile rendering a user avatar retrieved dynamically from internal storage paths with click-to-expand preview enabled.
An image gallery asset display loading an external HTTPS image path with scale-to-fit formatting and frame borders.

Avoid

Squeezing image displays into tiny layout boxes — allocate at least 3 rows high and 6 columns wide for comfortable image viewing.
Using as a file upload input element — use the storage_file_input component instead to allow user file selections.

Use instead

File Input — You need an interactive button allowing users to pick and upload a new image file rather than rendering an existing one.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Value

PathrequiredCustom expression: Text input or custom expression representing the image file path or web URL.
Example https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJJj524mfpLfX-3Xy2VCefEK4De0sPvdF9ean3eEulkQ&s
Default: none
Is Using File StorageoptionalYes / no: Boolean switch indicating whether the provided image path references file storage rather than an external web URL.
Default: none
Full Size on ClickoptionalYes / no: Boolean switch enabling a full-screen lightbox/popover overlay when the user clicks the rendered image.
Default: none

Formatting

VariantoptionalOne of: stretch, none, xAxis, yAxis, contain

Controls image scaling and boundary fitting within the container footprint.

Choices

stretch
none — Renders image at native resolution bounds without forced scaling.
xAxis — Scales image width to match container width while maintaining aspect ratio.
yAxis — Scales image height to match container height while maintaining aspect ratio.
contain — Scales image proportionally to fit entirely inside the container without cropping.

Default: contain

Is WrappedoptionalYes / no

Boolean switch applying a background container frame and outer perimeter border around the image.

Default: none

Sizing

Default size when dropped on a page: 2 × 2.

Accessibility

Renders an accessible <img> element. When showFullSizeOnClick is active, keyboard focus enables Spacebar/Enter interaction to launch full-screen modal overlays.

Tab focuses the image container when clickable.
Enter or Spacebar triggers full-size image modal overlay.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "path": "@@expression:'value'"
  }
}

1
2
3
4
5
6
7
8
9
{
  "config": {
    "path": "@@expression:'value'",
    "variant": "stretch",
    "isWrapped": false,
    "fullSizeOnClick": false,
    "isUsingFileStorage": false
  }
}

Ready-made setups

Storage Image with Full-Size Preview Overlay ↕

Configures a 6x3 storage image viewer loading a CYPEX file storage asset with scale-to-fit formatting, frame borders, and click-to-expand previewing.

1
2
3
4
5
6
7
8
9
{
  "config": {
    "path": "@@expression: dynamicQueries.getUserAvatarPath",
    "isUsingFileStorage": true,
    "fullSizeOnClick": true,
    "variant": "contain",
    "isWrapped": true
  }
}

Notes

Description

The StorageImage is used to display an image.

config

property	type	description	required
`path`	`string`	The path to the image	✔️
`variant`	`“none”	“stretch”	“xAxis”