image

You can use this component as a unique visual identifier. Display a profile photo, company logo, photo of products, and much more to improve your application's visual experience.

The image component can be part of the header and as a child component in jig.default.

Image Preview

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
uri	The image source (either a remote URL or a local file resource). The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).

Other options
height	Change the height of the image in pixels. Ensure a proper resizeMode is used to achieve the best results on different device resolutions. The default is set at 196 pixels.
resizeMode	Resize the image when the frame doesn't match the raw image dimensions. The following options are available: center - If the image is bigger than the area it is scaled down making it completely visible. The image is not scaled up. contain - Scales 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). cover - Scales 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). stretch - Scales the width and height of the image independently, This may change the aspect ratio of the source.
subtitle	Adds a subtitle that is displayed on or next to the image based on image context.
title	Display the text content for the title that can be displayed on or next to the image based on the image context.
width	Change the width of the image in pixels. Ensure a proper resizeMode is used to achieve the best results on different device resolutions.

Actions
onPress	The action is triggered when pressing on the image. Use IntelliSense (ctrl+space) to see the list of available actions.

Considerations

• Dynamic Data cannot save images larger than 350K. Jigx does not recommend storing images in Dynamic Data or storing images as base64 in the Dynamic Data database.

• The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline. For more details, refer to Assets.

Examples and code snippets

Image in Header

Image in header

Image is used as a background picture in the header section.

Examples: See the example using static data in GitHub. See the example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

header (static)

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: Header image
        source:
          uri: [email protected][0].image

header (dynamic)

datasources (static)

datasources (dynamic)

Image in jig/default

Image in a jig

Image as a children component in default jig.

Examples: See the example using static data in GitHub. See the example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

jig (static)

title: Image in jig/default
type: jig.default

children:
  - type: component.image
    options:
      title: Image
      subtitle: in jig/default
      source:
        uri: [email protected][0].image

jig (dynamic)

datasources (static)

datasources (dynamic)