Components

image

8min

You can use this component as a unique visual identifier. This can be used to display a profile photo, company logo, photo of products, and much more. It can also help to improve the visual experience of your application.  
The image component can be part of the Header, stories﻿ and as a child component in jig.default﻿. 
Image Preview
﻿
The images can be preloaded and cached by using the assets property in your index.jigx file. The images will be displayed even when you are offline.  For more details please refer to the Index settings﻿﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: uri
Other options:
title and subtitle - The title and subtitle/ short description for your image
height- the height of the image displayed (in pixels)
resizeMode - It includes these options:
center
contain
cover
stretch
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event
﻿Examples and code snippets ﻿
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 (dynamic)
datasources (static)
datasources (dynamic)
|
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: Header image
        source:
          uri: =@ctx.datasources.story-static[0].image
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: Header image
        source:
          uri: =@ctx.datasources.story-static[0].image
﻿
Image in Story
﻿
Image as a front cover of the story.
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.
﻿
story (static)
story (dynamics)
datasources (static)
datasources (dynamic)
|
stories:
  type: component.story-group
  options:
    data: =@ctx.datasources.story-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: =@ctx.current.item.title
        subtitle: =@ctx.current.item.description
        onPress: 
          type: action.go-to
          options:
            title: Read more
            linkTo: =@ctx.current.item.url
        source:
          uri: =@ctx.current.item.image
stories:
  type: component.story-group
  options:
    data: =@ctx.datasources.story-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: =@ctx.current.item.title
        subtitle: =@ctx.current.item.description
        onPress: 
          type: action.go-to
          options:
            title: Read more
            linkTo: =@ctx.current.item.url
        source:
          uri: =@ctx.current.item.image
﻿
Image in jig/default
﻿
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)
jig (dynamic)
datasources (static)
datasources (dynamic)
|
title: Image in jig/default
type: jig.default

children:
  - type: component.image
    options:
      title: Image
      subtitle: in jig/default
      source:
        uri: =@ctx.datasources.story-static[0].image
title: Image in jig/default
type: jig.default

children:
  - type: component.image
    options:
      title: Image
      subtitle: in jig/default
      source:
        uri: =@ctx.datasources.story-static[0].image
﻿
See also
﻿Developer reference 
﻿Related examples (Github)﻿
﻿
﻿

Updated 19 Sep 2023

Did this page help you?

TABLE OF CONTENTS

Configuration options

Examples and code snippets

Image in Header

Image in Story

Image in jig/default

image

﻿Configuration options﻿

﻿Examples and code snippets ﻿

Image in Header

Image in Story

Image in jig/default

See also

﻿

Configuration options

Examples and code snippets