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" user interface (UI) element on your application's pages. You can link an image from a specific web address (URL) to any image component you've placed in your design. This is useful for displaying product images, user avatars, banners, or any other visual content that might change.

Input​

  • Image UI Element (Type: PART, Required) The specific "Image" component on your page that you want to update. You will typically select this directly from your application's design canvas.
  • Url (Type: STRING, Optional) The web address (URL) of the image you wish to display. If you leave this blank, the image component will clear its current image.

Output​

This action does not produce a direct output value. Instead, it modifies the specified "Image UI Element" directly on your application's page, updating its displayed image.

Execution Flow​

Real-Life Examples​

Here are some ways you can use this action in your no-code application:

Example 1: Displaying a Product Image​

Imagine you have a product detail page where the main product image needs to change based on the selected product.

  • Inputs:
    • Image UI Element: Product_Main_Image (the image component on your product page)
    • Url: https://yourwebsite.com/images/product_a_large.jpg (a static URL for a specific product)
  • Result: The Product_Main_Image component on your page will immediately display the image located at https://yourwebsite.com/images/product_a_large.jpg.

Example 2: Updating a User's Profile Picture​

When a user updates their profile, you might want to show their new profile picture dynamically.

  • Inputs:
    • Image UI Element: User_Profile_Picture (the image component displaying the user's avatar)
    • Url: [Variable: CurrentUser.profileImageUrl] (a variable holding the URL of the user's new profile picture, perhaps retrieved from a database or another action)
  • Result: The User_Profile_Picture component will update to show the image from the URL stored in the CurrentUser.profileImageUrl variable, reflecting the user's latest profile picture.

Example 3: Clearing a Temporary Banner​

You might have a temporary banner image that you want to remove after a certain event or user interaction.

  • Inputs:
    • Image UI Element: Promotional_Banner (the image component displaying the banner)
    • Url: (Leave this field empty)
  • Result: The Promotional_Banner component will no longer display any image, effectively clearing the banner from your page.