Image

Create a mobile application. For more information, see Create a mobile application.

In the mobile application editor, click the Components icon on the far left.

(Optional) Add column components to set up the page layout. For more information, see Horizontal Column and Vertical Column.

In the search box above the component list to the left of the canvas, enter Image to find the component. Then, drag the component onto the canvas.

For more information about adding components, see Add components.

In the Style panel on the right side of the editor, configure the image data source in one of the following ways.

• Click Upload Image to upload a local image or select one from the image library.

• Click the data source configuration icon to the right of Upload Image, and then select a data source type. The returned data serves as the image URL.

  The available data source types are Device, API, Application Push, and Page Variable. The returned data must be a string.

Click OK.

The component updates the displayed image in real time based on the bound data source.

In the Style panel on the right, configure the border's visibility and style.

You can bind the border style configuration items to a dynamic data source. For more information, see Data sources for configuration items.

Adjust the component's position on the page. For more information, see Common Styles.

On the Interaction tab on the right side of the mobile application editor, click Add Interaction to set an Event and an Action.

Supported events include Click and Double-click. For example, you can set the Click event on the component to trigger the Refresh Component action, which refreshes a specified component's content.

For details, see Interaction Configuration.

Preview and debug the data and style of the component. For details, see Preview and Debug.