Image

Step 1: Add component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

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

   For more information about adding components, see Add a component.

   After selecting the component, configure its properties, such as position (X, Y), size (W, H), visibility, and opacity, in the Style panel on the right. Use the Upload Image button to set the image content.

Step 2: Configure data source

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

   • Click Upload Image to upload an image from your local computer or select one from an existing image library.

   • Click the Configure Data Source icon to the right of Upload Image to select and configure a data source type that returns the image URL.

     Available data source types are device, API, application push, and page variable. The returned data must be a string.

2. Click OK.

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

Step 3: Configure style

• Component Visibility:

  If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure whether the component is visible when the device is offline. If the data source returns a numerical data type, you must use Convert Integer to Boolean or Convert Number to Enum to configure the visibility.

  Note

  In a Repeat List, to configure component visibility based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows:

  • If the data source of the Repeat List is a device, the data source for component visibility can be set to parent component data source or device.

  • If the data source of the Repeat List is a non-device type, the data source for component visibility must be device.

  Component Visibility supports dynamic data sources. Available options are device, API, and App Push.

• Image style:

  If the image appears stretched, adjust its W (width) and H (height) values.

For more information about common style configurations for components, see Style Configuration.

Step 4: Configure interactions

1. Select the component's Interaction tab to configure events and actions. For more information, see Configure interactions.

   For example, you can configure the component to trigger the open link action on click. This action allows you to specify how a link opens and what it displays.

2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.