1. Home
  2. Tutorials
  3. Working with APIs
  4. Display Images from an API Array

Display Images from an API Array

If your API response includes an array containing the URLs for images you want to display in your app, you can do so using request Events. The process is slightly different from displaying other API arrays, as you need to specify that the app should load the images from the Web when the response data loads into a dynamic Element.

ⓘ Note

To display images from URLs that are not inside an array in your response, see Display an Image from an API Response instead.

With the request added to a page in your app:

  1. Add a dynamic Elementhelp to the page. Inside the dynamic Element add a single child Element, and add an Image Element inside the child Element.
  2. Open the request in the API tab on the right of the editor. Select Responses.
  3. The array containing the image URLs will be listed as a Data Source. Bind the Data Source to the dynamic Element, either by clicking and dragging onto the Canvas, or clicking the Data Source and making a selection. bind image data source
  4. Select the childhelp of the dynamic Element (the Element containing the Image). Open Properties > Events on the right of the editor.
  5. Select the Load/Loaded Event – this will occur when the Data Source data from the API loads into the Element.
  6. Click the plus plus button and add the Display Image from URL Action. Click Edit.
    • In the first input, select the Image Element you added to the dynamic Element. select dynamic image
    • In the second input, select the URL from the Data Source container. select data source url

    The Element can access the fields from the array entry bound to it. Save the Action.

When the app runs and the API response is loaded into the dynamic Element, each image will load from its URL. Remember to use a Run API Request Action to execute the request.

Was this article helpful to you? Yes No

How can we help?