Image

How to use

The Image component can display images that you've uploaded to your Draftbit project's Assets which will be bundled with your app's files or you can give it a URL to a remote image. You can add one to your Screen from the component picker.

📘
The currently supported formats are png, jpg, jpeg, bmp, gif, webp, and svg.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property	Description
Blur Radius	A number between `1` and `100` that determines the blur radius of the blur filter added to the image. Defaults to `0`. On IOS, you will need to higher than `5` for any effect.

Property

Description

Blur Radius

A number between 1 and 100 that determines the blur radius of the blur filter added to the image. Defaults to 0.

On IOS, you will need to higher than 5 for any effect.

Sizing

You adjust the size using the Width and Height props in the Styles Panel.

You may need to play around with a combination of the Width, Height, Resize Mode, and Content Position to get the desired effect.

Configuration Properties

Property	Description
Component Name	Set the name of the component. The name is reflected in the Components tree. Defaults to Image.
Resize Mode	Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property. `cover` - The image is sized to maintain its aspect ratio while filling the container box. If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. `contain` - The image is scaled down or up to maintain its aspect ratio while fitting within the container box. `fill` - The image is sized to entirely fill the container box. If necessary, the image will be stretched or squished to fit. `none` - The image is not resized and is centered by default. When specified, the exact position can be controlled with contentPosition prop. `scale-down` - The image is sized as if none or contain were specified, whichever would result in a smaller concrete image size.
Content Position	It is used together with Content Fit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.
Transition Effect	Set how the image view should transition the contents when switching the image source. On Android, only `'cross-dissolve'` is supported. On Web, `'curl-up'` and `'curl-down'` effects are not supported.
Transition Duration	The duration of the Transition Effect in milliseconds
Transition Timing	Specifies the speed curve of the Transition Effect and how intermediate values are calculated.
Cache Policy	Determines whether to cache the image and where `none` - Image is not cached at all. `disk` - Image is queried from the disk cache if exists, otherwise it's downloaded and then stored on the disk. `memory` - Image is cached in memory. Might be useful when you render a high-resolution picture many times. Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions. `memory-disk` - Image is cached in memory, but with a fallback to the disk cache.
Allow Downscaling	Whether the image should be downscaled to match the size of the view container. Turning off this functionality could negatively impact the application's performance, particularly when working with large assets. However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality. Downscaling is never used when the Content Fit prop is set to `none` or `fill`.

Data Properties

Property	Description
Source Type	Select the type of source to use for the image `Static`: Use when the image source is an uploaded Asset that will be bundled with your app's code. `Remote Url`: Use when the image source is a static URL that won't change. `Data`: Use when the image URL is dynamic and coming from an REST API Endpoint.
Source	Set the source to use for the image depending on which Source Type you selected. For `Static`, you'll be able to select one of your uploaded assets as the image source. For `Remote Url`, you'll be able to enter a URL to use as the image source. For `Data` you'll be able to pass a dynamic value such as a value from a Fetch or List.

Property

Description

Source Type

Select the type of source to use for the image

Static: Use when the image source is an uploaded Asset that will be bundled with your app's code.

Remote Url: Use when the image source is a static URL that won't change.

Data: Use when the image URL is dynamic and coming from an REST API Endpoint.

Source

Set the source to use for the image depending on which Source Type you selected.

For Static, you'll be able to select one of your uploaded assets as the image source.

For Remote Url, you'll be able to enter a URL to use as the image source.

For Data you'll be able to pass a dynamic value such as a value from a Fetch or List.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Examples

Adding rounded corners to an image

To give an Image rounded corners, you can adjust the Image's Border Radius property in the Styles panel.

Adding components on top of an image

If you want to position other content on top of an image, you should instead use the Image Background component which acts like a View with a background image.