Set the media library image of an image ui element

Function: Set the media library image of an image UI element

This action allows you to easily link an image from your platform's media library to an image display area (UI element) on your application's pages. This is useful for dynamically changing images without needing to upload new files or manage external links.

Input,

• Image UI element: This is the specific image display area on your page that you want to update. It must be an image type UI element. (Required)
• Image ID: This is the unique identifier for the image you want to use from your media library. If you leave this blank, the image UI element will be cleared. (Optional)

Output,

This action does not produce a direct output value. Instead, it updates the specified "Image UI element" on your application's page to display the chosen image from your media library.

Execution Flow,

Real-Life Examples,

Here are a few ways you can use this action in your application:

Example 1: Updating a Product Image on an E-commerce Page

Imagine you have an e-commerce application where product details are displayed. When a user selects a different color option for a product, you want the main product image to update accordingly.

• Inputs:
  • Image UI element: Product_Main_Image (This refers to the image display area on your product detail page)
  • Image ID: product_red_shoe_12345 (This is the ID of the red shoe image stored in your media library)
• Result: The Product_Main_Image on the product detail page instantly changes to display the red shoe image from your media library.

Example 2: Changing a User's Profile Picture

In a social networking or user profile application, when a user uploads a new profile picture to the media library, you can use this action to update their profile display.

• Inputs:
  • Image UI element: User_Profile_Picture (This is the image display area for the user's profile picture)
  • Image ID: user_avatar_john_doe_67890 (This is the ID of the newly uploaded profile picture in the media library)
• Result: The User_Profile_Picture across the application (e.g., on their profile page, in comments) is updated to show the new avatar.

Example 3: Dynamically Setting a Banner Image for a Campaign

You might have a marketing campaign where the banner image on your homepage needs to change based on the current promotional event.

• Inputs:
  • Image UI element: Homepage_Banner (This is the main banner image display on your application's homepage)
  • Image ID: summer_sale_banner_promo_abc (This is the ID of the specific summer sale banner image from your media library)
• Result: The Homepage_Banner on your application's homepage is updated to display the "Summer Sale" promotional image.