Ask AI
Skip to main content

Set the image url of an image ui element

Function: Set the image URL of an Image UI Element​

This action allows you to dynamically change the image displayed within an "Image" component on your application's page by providing a web address (URL) to a specific image. This is useful for updating images based on user actions, data changes, or external sources without needing to manually upload new images.

Input​

  • Image UI Element (Required): This is the specific image component on your application's page that you want to update. You'll select this directly from your page's design.
  • Url: This is the complete web address (URL) of the image you wish to display in the selected Image UI Element. For example, https://example.com/images/product123.jpg. If you leave this field empty, the image component will be cleared.

Output​

This action does not produce any direct output. It performs an action on your application's user interface.

Execution Flow​

Real-Life Examples​

  • Example 1: Displaying a User's Profile Picture

    • Scenario: After a user logs in, you want to display their profile picture, which is stored as a URL in your database.
    • Inputs:
      • Image UI Element: ProfilePictureComponent (the image component on the user's profile page)
      • Url: \{\{CurrentUser.profileImageUrl\}\} (a variable holding the URL of the logged-in user's profile picture)
    • Result: The ProfilePictureComponent on the page will immediately update to show the user's profile picture fetched from the provided URL.

  • Example 2: Changing a Product Image on Selection

    • Scenario: On an e-commerce product page, when a user selects a different product variant (e.g., a different color), you want to update the main product image.
    • Inputs:
      • Image UI Element: MainProductImage (the large image component displaying the product)
      • Url: https://yourstore.com/products/red_shirt.jpg (the URL for the red shirt variant's image)
    • Result: The MainProductImage component will change to display the image of the red shirt.

  • Example 3: Clearing an Image Placeholder

    • Scenario: You have an image component that shows a temporary placeholder. After a certain action (e.g., deleting an associated item), you want to clear this image.
    • Inputs:
      • Image UI Element: ItemThumbnail (the image component displaying the item's thumbnail)
      • Url: (Leave this field empty)
    • Result: The ItemThumbnail component will clear its current image, effectively showing nothing or reverting to its default empty state.