Image

Image is designed to displaying a image on screen.

Usage

Drag Image component to place text needed to be display, and then set the image link within "Properties" session.

Action [ Created ]

Simply click the action you want to define and drag components inside.

Created:

Airbnb Login	Spotify Categories	Book Cover liked design

It's useful when we need a background image as the above examples. Simply design the layout after Image component "created".

Example

If you want a filter on top of the image, drag a "Group" component as same size as the image and set it background color with less opacity. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Image -> (Created) -> Group -> (Created) -> Set Style [Flex: 1, Bg Color: rgba(0, 0, 0, 0.5)]

Properties

Simply click a gear on the right hand corner of related "Image" component to edit the properties.

URL/Base64 - There're two method for image URL input which are static or dynamic. If you need to show a static image on screen, simply type in the URL of the image. You can also click the upload icon to upload your own image to cloud and the URL will be filled automatically.

If you need to use a variable, please use with ${ } for dynamic image display.