Image
Add pictures to a screen, upload and choose them from the project image library, and control fit, shape, overlay and a separate dark mode image.
Use an Image for photos, illustrations, app screenshots and logos. Pictures come from your project's image library, which you can upload to without leaving the editor.
Add it
- Drag Image from Basics onto the phone.
- Or hover a layer in Layers, click +, then Basics, then Image.
A new image shows a gray 400 by 400 placeholder. Select it and choose your own picture before you publish.
New images have a Width of Fill, a Height of Fit content, and Fit Mode set to Fit content.
Where it can go
Inside any layer that holds children, including buttons, plan cards and carousel pages. An image cannot hold children. See Where components can go.
A full-width image as the very first item of the root stack, when the screen has a header, slides up behind the header, which gives you a hero picture under a transparent top bar.
Design panel
Content
The picker shows the current image. Hover it for Change Image. With no image it reads Choose Image. Click it to open the Image Library.
| Control | What it does |
|---|---|
| Upload | Uploads a file from your computer. PNG, JPEG, WEBP and GIF are accepted, up to 5 MB. Otherwise you see Only PNG, JPEG, WEBP, or GIF images are supported. or Image must be 5 MB or smaller. |
| An image tile | Click to use that image. |
| Delete button on a tile (appears on hover) | Deletes the file for good, after a Delete image? confirmation. Any screen that still uses it shows a broken image. |
| Load more | The library loads 20 images at a time. The counter shows how many are loaded out of the total. |
The library belongs to the project, so every screen in the project can reuse the same uploads.
In dark mode the picker edits the dark image. If there is none, it says Dark mode shows the light image. and offers Add dark image, which copies the light one to start. Once it has its own, the note reads Dark mode has its own image. and Use the light image removes it.
Layout
| Control | What it does | Default |
|---|---|---|
| Width, Height | Fill, Fit content, Fixed, Relative | Fill, Fit content |
| Fit Mode | Fit content shows the whole picture inside the box. Fill covers the box and crops the edges. | Fit content |
Spacing, shape and effects
| Section | Control | What it does | Default |
|---|---|---|---|
| Spacing | Padding, Margin | Space inside and outside | 0 |
| Mask Shape | Shape | Rectangle or Circle. A rectangle adds four corner radius boxes for rounded corners. Click + to turn on. | Off |
| Color Overlay | Color | A color laid over the image, such as black at low opacity to darken it. Click + to add. | Off, black when added |
| Border | Color, Width | A line around the image. | Off |
| Drop Shadow | X, Y, Radius, Color | A shadow. | Off |
An overlay color can be translucent: use an 8 digit hex value such as #00000066.
States
An image has no When selected tab and no disabled state.
Dark mode and screen sizes
- Give logos with dark artwork a separate dark mode image, or they disappear on a dark background.
- With Width at Fill the image scales with the screen. A Fixed size does not.
- On wide devices a tall image can become very large. Set a Fixed height, or a Relative width, and use Fill for Fit Mode to keep it under control.
Tips and common mistakes
- Upload images at about twice the size they appear at, so they stay sharp on high density screens, and keep files small. A 5 MB upload limit applies.
- Choose Fit content to keep the whole picture, and Fill when the shape of the box matters more than the edges of the picture.
- Make a round avatar with a Fixed width and height that are equal, then Mask Shape set to Circle.
- There is no alt text field in the panel. If a picture carries meaning, repeat it in a nearby text.
- Do not delete library images that screens still use.
- The placeholder is only a stand-in. Replace it before publishing.
In the JSON
The component type is image. The picture is in source, with a light file and an optional dark one. Other fields are fit_mode, mask_shape, color_overlay, border, shadow, size, padding and margin.