The Image is a component that allows you to display an image asset visually, similar to the <img> tag in web development.

Source and Data Binding

Images can be added to your application using two primary methods, allowing for both static and dynamic content display:

• Static Source: You can add an image by uploading an image to your project or by specifying a static URL of the image.

• Dynamic Source: You can display dynamic data by binding the image’s source to a value using FQL. This allows images to change based on application state or data retrieved from a Flow.

Supported Formats: JPEG, PNG, GIF

💡💡💡 Tip 💡💡💡

If you want to use an image as a background and place other components on top of it, use the Background Image component instead.

Container-Based Sizing

The Image component is fundamentally a container for an image. When you set the dimensions of the component, you are setting the dimensions of the container itself, not the image directly. The image's appearance within that defined container is then controlled by the Resize Mode property.

Available Properties

Size Properties

• Resize Mode (Size Panel): Specifies how the image should "fit" within its container while respecting its original aspect ratio.
• • Cover: Resizes the image to fill the entire container while maintaining its original aspect ratio. Portions of the image may be cut off.
  • Contain: Resizes the image so that the entire image fits within the container while maintaining its original aspect ratio. This prevents cut-off, but may result in blank space.
  • Stretch: Resizes the image to fill the container. The image will be stretched and distorted if its aspect ratio differs from the container.
  • Repeat: If the image is smaller than the container, the image will be repeated to fill the container.
  • Center: The image is resized while maintaining its original aspect ratio and is presented in the center of the container.

Effect Properties

• Tint Color (Effects Panel): When working with images that contain transparency, this property will recolor all non-transparent parts of the image to the specified color, effectively turning the source image into a mask.
• Overlay Color (Effects Panel [Android Only]): Allows you to specify a color for the empty space outside of rounded corners when displayed in Android apps.