Image Component

1.1 Application

When users need to use pictures in the dashboard, they can use the image component to insert pictures in the dashboard.

For example, insert the company logo as the component title in the dashboard, as shown in the following figure:

1.2 Function Introduction

The component supports four image types: JPG, PNG, BMP and GIF.

2. Procedure

2.1 Add an image component

In the dashboard editing interface, add an image component. There are two ways:

• Click "Add Component>Other>Image Component". As shown below:

• Drag the "Image Component" button to the designated area on the dashboard. As shown below:

2.2 Upload images

After adding the image component, upload the picture in the component. Select the image that needs to be uploaded to upload it. There are two ways to upload pictures:

• Click the button in the upper right corner to upload the picture. If you want to change the picture in the component, click  to upload again.

• Double-click the component to upload the picture.

Note: The uploaded picture is saved in %FineBI%\webapps\webroot\WEB-INF\assets\temp_attach.The pictures can be found based on the approximate upload date, and the pictures in the path can be clicked to open and view directly.

After uploading the picture, drag the component frame to adjust the size and position of the component.

2.3 Set image size

Click to set the image size to "original size", "scale adaptation" or "adapted component", here select "adapted component" as shown in the figure below:

• Original size: refers to import without changing the size of the picture itself.

• Scale adaptation: refers to automatically adapting to the size of the component according to the aspect ratio of the picture, and the size of the picture will be stretched proportionally as the component changes.

• Adapted component: It means that the size of the imported picture is always the same as the component size.

2.4 Add web link

Click the "Add Web Link" button  to add a hyperlink to the picture, as shown in the figure below:

After adding the link, click on the image to jump to the corresponding URL. As shown below:

2.5 Allow to overlap

The picture component supports overlapping. For details, please refer to the document: Component overlap.