Work with the Image Gallery

While it's possible to import image resources, then associate them with image components on an App UI's page, you can do both at one shot using the Image Gallery, which is accessible from the Data tab in the Properties pane when an image component is selected on the canvas.

The Image Gallery lets you view and manage images available for use in an App UI's pages—but it only displays the images that are added to an images folder under Resources either for a particular App UI or for the extension. Images stored in other locations won't show in the Image Gallery.

You can use the Image Gallery to import and apply an image to a UI component, or to select a previously imported image for a UI component.

To work with images in the Image Gallery:

1. Open a page in the Page Designer and select an image or avatar component on the canvas.
2. Click the Data tab in the component's Properties pane.
   
   

   
   Description of the illustration image-gallery-data-tab.png

   
   

   The Data tab displays a Source URL field for the path to the stored image. This field is empty when an image has not yet been defined.

   You need to access the Image Gallery to add images to the App UI or extension's images folder. If you were to drag an image into the drop target area in the Data tab, it will be added to the App UI's images folder (and the path to the image will be specified in the Source URL field), but the Image Gallery won't open.

3. Click the Image Gallery icon ( ) under Source URL to open the Image Gallery.
   
   

   
   Description of the illustration image-gallery-select-upload.png

   
   
4. If the image you want to apply to the UI component was previously imported and exists in the Image Gallery, select it in the Images panel, either under the App UI or Extension folder. If the image doesn't exist, select the folder where you want to add the image, then drag it into the drop target area. You can also click the drop target area and select an image from your local file system.

   You can add as many images as you want, but you need to import them individually.

5. When you have your image, click Select.
   
   

   
   Description of the illustration image-gallery-select-image.png

   
   

   The path to the image will be added to the image or avatar component's Source URL in the Data tab. If your image is stored under the App UI's resources, you'll see something similar to [[ $application.path + 'resources/images/ca.png' ]]. If it is stored as part of the extension's resources, you might see [[ $extension.path + 'resources/images/ca.png' ]].