Media
Image
Single image block for hero images, section banners, product and service visuals, and decorative media. Images are picked from device and optionally uploaded to cloud storage - empty slots show a guided placeholder so the layout never looks broken during setup.
Pick a preset or set an explicit width and height override for precise control.
Prefer cover for banners; use contain when full asset visibility matters.
Available on all plans.
Four things worth knowing
Cloud upload through the editor
Images are picked from device via the builder property editor. When the app has an appId, the selected image is uploaded to cloud storage - the stored URL works for all app users, not just the editor’s device.
Guided placeholder when empty
When no image is set, the component shows an image icon, an Add image title, and helper text. The layout stays intact and clearly signals that content is needed - no blank or broken area.
Size presets and explicit overrides
Choose small, medium, or large for a proportional preset width. Set width and height directly when you need pixel-exact control.
Builder mode vs. preview mode
Tapping the image on the canvas opens a quick change-image modal for fast editing. In preview and runtime, direct editing interaction is disabled - the image renders as a static block.
Find it, drop it, add an image
Where to find itAdd it to any screen
- Component picker → Media → Image.
- Drop it on any screen section - hero areas, cards, and content blocks all work.
- Tap the placeholder on the canvas to open the image picker immediately.
Before you publishThree things to check
- Set the image source from device - the placeholder is visible to all users until an image is added.
- Choose a resize mode:
coverfor hero/marketing,containfor logos and product cutouts. - Use consistent aspect ratios across a page for cleaner layout rhythm.
Source, sizing, and fit
Every prop below is set directly in the property panel. Start with the image source and size preset - the rest are optional refinements.
| Prop | Type | Default | Description |
|---|---|---|---|
source | string | ” | Image URI. Empty string shows the guided placeholder. |
sizeVariant | select | ’medium’ | Preset width scale: small, medium, or large. |
width | number | - | Explicit width override. Takes precedence over the size preset. |
height | number | - | Explicit height override. |
aspectRatio | number | 1 | Used when height is not fixed. |
resizeMode | select | ’cover’ | Image fit behavior: cover, contain, or stretch. |
borderRadius | number | 8 | Corner rounding for the image and placeholder. |
opacity | number | 1 | Overall alpha for the image block. Keep close to 1 unless intentionally styling overlays. |
Make it yours
The defaults are a neutral starting point. Adjust sizing, rounding, and fit mode to match the brand without touching anything else.
| Prop | Default | What it controls |
|---|---|---|
borderRadius | 8 | Corner rounding. Set to 0 for a sharp-edge banner; increase for card-style blocks. |
opacity | 1 | Block transparency. Reduce for overlay or muted decorative use cases. |
resizeMode | ’cover’ | cover fills the frame; contain shows the full asset; stretch distorts to fit. |
sizeVariant | ’medium’ | Swap between small, medium, and large without setting pixel values. |
Common mistakes to avoid
Set the image before publishing
The placeholder is visible to all users - not just in the builder. An empty image block looks incomplete in a live app. Always add an image before going live.
Use consistent aspect ratios
Mixing tall and wide images on the same page creates uneven layout rhythm. Pick a ratio and stick to it across similar blocks.
Prefer cover for hero and marketing
cover fills the frame and looks intentional for banners. Switch to contain only when the full asset must be visible - logos and product cutouts.
Keep opacity close to 1
Low opacity reduces image clarity and often looks like a mistake rather than a design choice. Only reduce opacity when intentionally creating an overlay or muted decorative effect.