Work with the Image Gallery

You use the Image Gallery to import image resources into your application and when selecting the image resource referenced by an image component. You open the Image Gallery from the Data tab in the Properties pane when an image component is selected on the canvas.

Images in your application are stored in an images folder, located in one of the resources folders in your application. A folder for resources in your application is created by default when the application is created. Images in the application’s resources folder can be used in any page of your application. In addition to the application’s default resources folder, each flow in the application might have a resources folder for resources used in pages in the flow.

You can use the Image Gallery to view and manage the images in your application. The Image Gallery only displays the images that are stored in the images folders of the application and the current flow. Images stored in other locations are not visible in the Image Gallery.

You can use the Image Gallery to perform the following tasks:

• Import images. You can choose to add images as resources of the current flow or the application.

• Select an image displayed by an image component. You can select images stored in the application’s or the current flow’s images folder. When you select the image, the path to the image (for example, {{ $flow.path + 'resources/images/myimage.png' }}) is entered in the component’s Source URL field in the Properties pane.

To import images into the Image Gallery:

1. Open a page in the Page Designer and select an image component on the canvas.

   You can select any image component on the canvas. Alternatively, you can temporarily drag an image component onto the canvas.

2. Open the Data tab in the Properties pane and click the Image Gallery icon ( ).

   When an Image component is selected on the canvas, the Data tab in the Properties pane displays a Source URL field for the path to the stored image. The field is empty when no image has been defined.

   
   
   Description of the illustration page-designer-inspector-newimage.png
   

   You need to open the Image Gallery to add images to the application’s images folder. If you drag an image into the drop target area in the Data tab, the image is added to the flow in the Image Gallery and the path to the image is automatically entered in the Source URL field, but the Image Gallery dialog box does not open.

3. Select Application in the Images panel of the Image Gallery.

   Alternatively, you can select Flow in the Image Gallery to import images into the flow’s images folder. The folder will be created automatically if it does not exist.

   
   
   Description of the illustration page-designer-imagegallery.png
   

   The Images panel of the Image Gallery displays a list of the images that can be used in pages in the application and in the current flow. In the Application section, two favicon images also appear that VB Studio uses for web and Progressive Web Apps. Overwrite these to use your own favicon images. You can select an image in the Images panel to preview the image. If you select an image in the Images panel and click Select, the path to the image will be entered in the Source URL for the image component in the Data tab.

4. Drag your image into the drop target area in the Image Gallery.

   Alternatively, you can click the drop target area to select an image using your local system’s file browser. You can import as many images as you want, but you need to add them individually. You can choose if you want to import an image into the Application or Flow resource folders by selecting the folder in the Images panel.

5. Click Close to close the Image Gallery without selecting an image for the image component.