Reference Guide

Image

The Image component allows you to add a single image to a screen. It is often used to insert logos, icons and other decorative graphics to an app.

Image components can be used to display graphics of all kinds

To add an image, simply drag the Image component from the tool bar onto your screen, and position it where you want it.

Image components are simply placeholders until you define an image source in the Properties panel

Image components are just a placeholder to begin with – a box into which you put an image. When you first drag the component onto the screen, you’ll see an icon that indicates that a source hasn’t been set yet.

Setting an Image Source

To display an image in the box, you’ll need to set a Source. Select your Image component on the Canvas and go to the Properties panel; there, you’ll see an Image Source option that will let you upload an image from your computer, or choose an existing image from the Nutshell Image Library.

Images can be applied from the Nutshell Image Library or uploaded from your computer

Any images you upload here will be stored in your Image Library automatically, so that you only ever have to upload a given image file once. Once you’ve set a source for your image, it will appear on the Canvas.

Inserting an Image Source Dynamically

You can set the source image dynamically from a data-source. What do we mean by dynamically? Dynamic data is content that changes based on something your end-user does.

For example, imagine that your app displays the profile of a new customer, including a photograph. The customer may be pulled from your app’s database, the image source file along with it. In this example, the photograph is dynamic as it changes to whatever was stored in the database.

Images are inserted dynamically from a Data component, where images are pulled from the Database and ‘mapped’ to an Image component using its unique reference. More information about the Data componentGo to Data - Data Component and the mapping process can be found elsewhere in this Reference Guide.

When the source of an image is set to be dynamic, the placeholder icons changes, so that you can see at a glance that it will be populated automatically when the app is run.

Resizing an Image

To resize an image component, click and drag on a corner of its bounding box. If you’ve opted to maintain the aspect ratio of the image, it will retain its shape while you resize it. If not, it will squash up to fill the whole space.

Image Properties

When an Image component is selected on the Canvas, the following settings are available in the Properties panel: