Image
A component for displaying bundled and remote images
The image component displays images on your Screen. The currently supported formats are png, jpg, jpeg, bmp, gif, webp.
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.
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.
Sizing
You adjust the size using the Width and Height props in the Styles Panel.
Always set a
WidthandHeightIn order for images to properly render on all platforms, be sure to set a
ptvalue for both Width and Height
Only use a % value for Width and Height if the parent component has a defined size. For example, when using inside an Aspect Ratio component, you can set the Width and Height to 100% to match the container's dimensions.
You may need to play around with a combination of the Width, Height, and Resize Mode 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. |
| 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. |
| Resize Mode | Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding) and at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).stretch: Scale width and height independently, This may change the aspect ratio of the src.repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view. |
Data Properties
| Property | Description |
|---|---|
| Source Type | Select the type of source to use for the imageStatic: 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.
Updated 3 months ago