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

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Image.
Resize ModeSet 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.

PropertyDescription
coverScale 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).
containScale 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).
stretchScale width and height independently, This may change the aspect ratio of the source.
repeatRepeat 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.
centerCenter 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 pt and enter the desired values.
  • To set the dimensions as a % of the screen size, change from pt to % 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.

How to create Rounded Images

To learn how to create Images with rounded borders check our guide here.


Did this page help you?