Add an Image to a Page

To add an image to a page, you position an image component on the canvas and specify the path to where the image is stored in your App UI's resources.

Images that can be used in your App UI's pages are stored in an images folder, either under the Global Resources folder for use by all App UIs in the extension, or under an particular App UI's Resources folder for exclusive use by that App UI. You can import an image to one of these locations before you actually add the image to a page, or you can import one directly when adding it to your page canvas. In both cases, the image becomes part of your App UI's resources and is available to you through the Image Gallery.

To add an image to a page:

1. Open the page in the Page Designer and drag an image component from the Components palette onto the canvas.
2. Specify the image's height and width in the General tab of the component’s Properties pane. Also enter the alt-text for the image.
3. Click the Data tab in the Properties pane.

   The Data tab contains a Source URL field that displays the path to the stored image and can be a string or a variable. This field is empty when an image has not yet been defined.

   
   
   Description of the illustration page-designer-inspector-newimage.png
   
4. If you want to explicitly use the Image Gallery to select an image that was already imported or add a new one from your local system, click the Image Gallery icon () and work with the Image Gallery. Otherwise, drag your image into the drop target area.
   
   

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

   
   

   Dragging an image in the drop target area also adds the image to the App UI's images folder and sets the path to the image in the Source URL field, similar to what happens when you use the Image Gallery. The only difference is that the Image Gallery won't open. When you work with the Image Gallery, you can also select (or add) images that are available to all App UIs in the extension.

   Note:

   To ensure that the relative path to the image is built correctly when the App UI is deployed, the path to the image in the Source URL field must include either $application.path to refer to images stored in an App UI's resources or $extension.path to refer to images stored in the extensions resources. You can use the Audits window to help you locate image paths in your App UI that might not be formed correctly.
5. Click the Events tab to trigger an action chain from a component event. Click the All tab to view and edit all of the component’s attributes.