Image
A component for displaying different types of images, including images from remote URLs and images from assets.
Adding an Image component
- Select the Image component from the Components drawer. You can open the list of components by clicking the
+button next to Components. - In the Data tab (third tab) in the Properties Panel, set the Source Type to Static. Then, in Source, select the image from uploaded assets.
In the example above, the Image component is using a static source type. There are three different options available to assign a Source Type to an image:
- Static when the image source is an uploaded asset.
- Remote Url when the image source is an URL.
- Data when the image source is coming from the REST API service you've integrated inside Draftbit.
Configuration Properties
| Property | Description |
|---|---|
| Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Image. |
| Blur Radius | A number between 1 and 100 controls how intense the blur is. Defaults to 0. |
| Resize Mode | Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the Resize Mode table below to learn more about each setting. |
Resize Mode
Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.
| Property | Description |
|---|---|
| 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). |
| 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 source. |
| 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. |
Modifying Image Dimension
To change the width and height of an Image:
- In the Properties Panel, go to the Styles tab (first tab).
- Under Size, modify the value of width and height.
It is important to give an Image width and height in order to display it.
There are two ways to set the Image component's dimensions:
- To set to an exact size, select
ptand enter the desired values. - To set the dimensions as a
%of the screen size, change fromptto%and enter the desired value.
An Image component wrapped by a container is constrained by the dimensions of the container. If you want to increase the image size, you will also need to increase the container size.
Modifying Blur Radius (Intensity)
To increase or decrease the blur effect, you can modify the value of the Intensity property.
In the example below, the intensity is set to 100.
In the example below, the intensity is set to 20.
Setting a higher value of intensity, the content underneath the Blur View component will become less visible.
How to create Rounded Images
To learn how to create Images with rounded borders check our guide here.
Updated 7 months ago