# Images

## Creating the component <a href="#ac0e19e9-9b6d-4ab0-bf6c-6fe353972c0b" id="ac0e19e9-9b6d-4ab0-bf6c-6fe353972c0b"></a>

In a dashboard, you can display images. Biwee offers the possibility to display:

* Static images: imported into the dashboard from a location on the user's computer (images).
* Bound images that can change according to user selections (bound images).

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdfbPhxM63CB9_oG5I%2FCreateImages.gif?alt=media\&token=062c51be-e56a-4091-a355-d31e4d86f780)

## Static image <a href="#id-4ad05ea8-5666-4ae9-8b3f-c70b113ecaf3" id="id-4ad05ea8-5666-4ae9-8b3f-c70b113ecaf3"></a>

**Insert a static image**

Right-click on the "Image" component inserted in the dashboard, and select "Load Image" or "Import Image".

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdfsZ40VBaUTDXmnRl%2FInsertStatic.png?alt=media\&token=79241239-fea8-4898-94ef-4c3f74c2970a)

## Static image settings <a href="#id-259258c7-f194-47e8-8fd1-e98aceb33c51" id="id-259258c7-f194-47e8-8fd1-e98aceb33c51"></a>

The image can be customized using the interaction and layout tool. Click on the gear visible on the top right of the diagram to access the tool.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-Mjdfv2VJhGEQbdE4lRH%2FSettings.png?alt=media\&token=94fc8444-f844-4cec-95e2-ef48d4ca859a)

It features 1 tab:

* Layout

### Layout <a href="#cabc6c27-592f-4578-a4c9-c325885c661d" id="cabc6c27-592f-4578-a4c9-c325885c661d"></a>

This tab allows you to customize the image display.

**Common**

This part allows you to configure the title of the component.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdfyuxK5Sk8QHQaVCl%2FCommonSettings.png?alt=media\&token=acecacea-6f83-432d-8090-8a06a28f5b26)

* *Show title:* Hide or show the title. It is displayed by default.
* *Modify title:* Rename the component.

**Open**

This part allows you to add an image from your computer, a copy will be saved in the dashboard.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdgDSHqS3C_OQPvELU%2FImport-LoadImage.png?alt=media\&token=35e8b872-f571-4afc-aa9a-99bb27dee06e)

**Size mode and alignment**

These parts allow you to modify the format of the image.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdgGXK4Aoj6f5TvJCB%2FSizeMode%2BAlignement.png?alt=media\&token=3185d007-ac56-4d26-845b-a7751f4b4ccb)

## Bound image <a href="#id-5b9b2f7a-8eea-4df9-8190-abc9b1ee026c" id="id-5b9b2f7a-8eea-4df9-8190-abc9b1ee026c"></a>

**Insert a bound image**

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhEFsAv6_yvQYupfC%2Fdynamicimage.png?alt=media\&token=cd2d6eec-df2f-4d1a-aff5-4a1eec54cf4e)

There are 2 ways to call a bound image in BIWEE:

* Either the image is accessible on the web.
* Either the image is stored in a database in binary format.

&#x20;**Insert an image accessible on the web**

&#x20;1\. Create a calculated field that contains the URI of the image: this field can fetch the URI from the data source, or it can be indicated directly in the calcutated field between apostrophe ' '.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhHLS8OfngO22fB6B%2Fexpression.png?alt=media\&token=31b1ba8e-cd3e-4aaa-9a97-1f83cdf85ae4)

2\. Add the calculated field in the Attribute field.

3\. Click on the cogwheel next to the calculated field.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhKU4OY6nTQPXiM_i%2FSettingsAttribute.png?alt=media\&token=fcbf269b-50dc-4012-9c8d-9c7f008000cb)

4\. Select URI, click on the 'Insert Placeholder' button. This adds {0} to the UR Model: {0} represents the value of the attribute.

5\. Click on "Apply" and the image is inserted into the dashboard.

I**nsérer une image qui est stockée dans une base de données**

1\. Create a calculated field  that contains the image in binary format into the bound image Attribute field.

2\. Click on the cogwheel and select "Binary Array"

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhRs6vpnk8CYsRmSz%2FSettingsAttribute2.png?alt=media\&token=91b73438-6325-4846-8964-12a6e3e6dd91)

&#x20;3\. Click on "Apply" and the image is inserted into the dashboard.

## Bound image settings <a href="#id-85031e0d-66cf-4397-bf6c-d80490543b23" id="id-85031e0d-66cf-4397-bf6c-d80490543b23"></a>

The bound image can be customized using the interaction and layout tool. Click on the cogwheel on the top right of the component to access the tool.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhkTwAfN10l9WAXlc%2FSettingsRelatedImage.png?alt=media\&token=dfd060a3-65f3-43eb-828f-2c9457ae1fad)

It is divided into 3 tabs:

* Interactions
* Layout
* Filters

### Interactions <a href="#id-61b3c54c-4c08-4a30-a61f-4d3cd5ca7913" id="id-61b3c54c-4c08-4a30-a61f-4d3cd5ca7913"></a>

This tab allows you to configure the interactions of the component with the other components of the dashboard.

[For more details, see the section dedicated to interactivity between visual components](https://doc.biwee.fr/english/create-dashboard/interactivity-component).

### &#x20;<a href="#id-48656834-d187-4f92-a7fb-3739f83fca43" id="id-48656834-d187-4f92-a7fb-3739f83fca43"></a>

### Layout <a href="#id-48656834-d187-4f92-a7fb-3739f83fca43" id="id-48656834-d187-4f92-a7fb-3739f83fca43"></a>

This tab allows you to customize the display of the component.

**Commun**

This part allows you to configure the title of the component.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhtWo9IVKxerSNXBu%2FCommonSettingsBound.png?alt=media\&token=5d72f489-b623-4d97-8926-55aaf048bb7c)

* *Show title:*  Hide or show the title. It is displayed by default.
* *Modify title:* Rename the component.

#### Size mode and alignment

These parts allow you to modify the format of the image.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-MjdhxBPz1GEn_5fGTzJ%2FSizeMode%2BAlignement.png?alt=media\&token=54ffccf1-76c4-473d-bb6d-679946b8efd1)

### Filters <a href="#id-7009ae02-c7f4-4f8f-9d2b-aaeb57aaa1f7" id="id-7009ae02-c7f4-4f8f-9d2b-aaeb57aaa1f7"></a>

This tab allows you to add a simple or combined filter on the data displayed in the component and has no influence on the other components of the dashboard.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdfTZxLuN3IbbU_dUk%2F-Mjdi-zW1ccLJJ84ibuy%2FFilters.png?alt=media\&token=7f0b4980-f879-4695-b2b6-675aa2231489)

For more details, consult the help topic dedicated to the [filters of a visual component](https://doc.biwee.fr/english/create-dashboard/data-filters-component).

For more details, see the following pages.

[Right-click menu](https://doc.biwee.fr/english/create-dashboard/right-click)

[Maximize](https://doc.biwee.fr/english/create-dashboard/maximize-component)

[Export](https://doc.biwee.fr/english/create-dashboard/export-component)
