website logo
👥 Community🎯 Samples on GitHub🚦 System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Overview
Reference
Actions
Data
UI
Widgets
Docs powered by
Archbee
Reference
UI

jc-image

17min

The schema defines the following properties:

Property

Type

Required

Description

type

component.image

true



instanceId

InstanceId | Expression

false



when

Expression | boolean

false



options

Image Options

true



instanceId (InstanceId | Expression)

when (Expression | boolean)

options (Image Options, required)

Properties of the options object:

Property

Type

Required

Description

title

string | Expression | TextWithFormat | TextLocale

false

Title that could be displayed on/next to the image based on current context.

subtitle

string | Expression | TextWithFormat | TextLocale

false

Subtitle that could be displayed on/next to the image based on current context.

resizeMode

ResizeMode

false

Determines how to resize the image when the frame doesn't match the raw image dimensions.'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 src.'center': Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up.

source

JCImageURISource

true

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).

height

number | string

false

Change constrain of image height. Remember to use a proper resizeMode toachieve the best results in all different device resolutions

width

number | string

false

Change constrain of image width. Remember to use a proper resizeMode toachieve the best results in all different device resolutions

onPress

keg-action-in-background

false

Action Keg component that will be triggered by pressing on this image.

title (string | Expression | TextWithFormat | TextLocale)

Title that could be displayed on/next to the image based on current context.

subtitle (string | Expression | TextWithFormat | TextLocale)

Subtitle that could be displayed on/next to the image based on current context.

resizeMode (ResizeMode)

Determines how to resize the image when the frame doesn't match the raw image dimensions.

'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 src.

'center': Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up.

source (JCImageURISource, required)

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).

height (number | string)

Change constrain of image height. Remember to use a proper resizeMode to achieve the best results in all different device resolutions

The object must be any of the following types:

height (string)

Default: 196

width (number | string)

Change constrain of image width. Remember to use a proper resizeMode to achieve the best results in all different device resolutions

The object must be any of the following types:

width (string)

onPress (keg-action-in-background)

Action Keg component that will be triggered by pressing on this image.



Sub Schemas

The schema defines the following additional types:

ResizeMode (enum<string>)

This element must be one of the following enum values:

  • contain
  • cover
  • stretch
  • center

JCImageURISource (Image Uri Source)

Properties of the JCImageURISource object:

Property

Type

Required

Description

uri

string | string

true



uri (string | string, required)

The object must be any of the following types:

uri (string)



Updated 25 Sep 2023
Did this page help you?
PREVIOUS
jc-icon
NEXT
jc-interactive-image-item
Docs powered by
Archbee
TABLE OF CONTENTS
instanceId (InstanceId | Expression)
when (Expression | boolean)
options (Image Options, required)
title (string | Expression | TextWithFormat | TextLocale)
subtitle (string | Expression | TextWithFormat | TextLocale)
resizeMode (ResizeMode)
source (JCImageURISource, required)
height (number | string)
height (string)
width (number | string)
width (string)
onPress (keg-action-in-background)
Sub Schemas
ResizeMode (enum<string>)
JCImageURISource (Image Uri Source)
uri (string | string, required)
uri (string)
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service