Image¶
General information¶
The Image component is used to display images in the user interface. This component is a key element for visualization and can be used to display photos, illustrations, and other graphical elements.
Parameters¶
Component properties
| Settings group | Setting field | Value Options | Purpose |
|---|---|---|---|
| Name | - | Name of the UI Component in the system | |
| Common | Binding | Multiselect of Catalog | Contains a related “File” field from the model |
| File | Button | Allows you to upload a file with the .png, .jpg, and .svg extensions | |
| Show placeholder image | True, False | Display of the placeholder image | |
| No image placeholder | Choose file from the disk, choose file from the storage | Placeholder image if no image is loaded |
CSS properties
| Settings group | Setting field | Value Options | Purpose |
|---|---|---|---|
| Layout | Width | - | Component width |
| Height | - | Component height | |
| Grow | true, false | The property determines how much an element will grow relative to the rest of the flex elements within the same container | |
| Margin | - | The property defines the outer paddings on all four sides of the element | |
| Padding | - | The property sets the inner paddings on all sides of the element | |
| Appearance | CornerRadius | - | The property is used to round the corners of an element |
| BorderThickness | - | The property allows you to set the boundaries for the element | |
| Brush | Background | - | The property sets the background color of the element |
| BorderBrush | - | The property sets the color of the element's border |
Cases¶
- Photo Display: Used to display custom photos, product images and other objects.
- Illustrations and Graphics: Applicable to display illustrations, graphic elements and logos.
Exceptions¶
- Performance: Using large or multiple images on a page can affect performance.