Image Component

Application Scenario

You can use the image component to add an image to the dashboard.

The following figure shows the effect.

Function Description

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

Note:

If you want to display images that are stored in URL format in the database, you can refer to Setting the Display of Tables in Image Format.

Image Component Adding

1. Choose Add Component > Other > Image Component.

2. Drag the Image Component button to the designated area within the dashboard.

Image Uploading

1. After adding the image component, upload an image in the component. Select the required image to upload it, as shown in the following figure.

Two ways are available to upload an image.

• Click the Upload Image icon in the upper right corner and upload an image. To replace the image in the component, click the icon and re-upload a new image.

• Double-click the component and upload an image.

Note:

The uploaded image is saved in the %FineBI%\webapps\webroot\WEB-INF\assets\temp_attach path. You can find the image based on the uploaded date. You can click the image file in the path to directly open and view the image.

2. After uploading the image, drag the component box to resize and relocate the component.

Image Size Setting

Click the Image Size icon and set Image Size to Original Size, Proportional Adaptation, or Adaptation to Component. Select Adaptation to Component in this example, as shown in the following figure.

• Original Size: import an image with its original size.

• Proportional Adaptation: import an image whose size automatically adjusts to the size of the component based on the image's aspect ratio (the image is stretched proportionally as the component changes).

• Adaptation to Component: import an image whose size is always the same as the component's size.

Link Adding

1. Click the Add Link icon and add a link to the image.

After adding the link, you can click the image to jump to the corresponding website.

Hover

For details about how to hover the image component, see Hover a Component.