Image Element in BML
The <image> element in BML provides a way to embed images within a BML content. It allows for the inclusion of visual content, such as illustrations, photographs, and diagrams, thereby enhancing the user interface with graphical elements.
Attributes
The <image> element supports various attributes to control its display and positioning. These attributes enable precise alignment and sizing of images within the document. Below is a table detailing these attributes.
| Attribute Name | Required | Type | Description |
|---|---|---|---|
| url | Yes | String | The source URL of the image. This must be a valid URL pointing to an accessible image file. |
| width | No | Number/String | Sets the width of the image, in pixels or percentage, determining how wide the image should be displayed. |
| height | No | Number/String | Sets the height of the image, in pixels or percentage, determining the height of the image. |
| marginTop | No | Number/String | The top margin of the image, in pixels or percentage. |
| marginBottom | No | Number/String | The bottom margin of the image, in pixels or percentage. |
| marginLeft | No | Number/String | The left margin of the image, in pixels or percentage. |
| marginRight | No | Number/String | The right margin of the image, in pixels or percentage. |
Examples
Basic image
This example shows how to embed an image using the <image> element:
<bml>
<image url="https://picsum.photos/id/237/200/300" />
</bml>
Result
Image with dimensions
This example shows how to embed an image using the <image> element:
<bml>
<image url="https://picsum.photos/id/237/200/300" wdith="100" height="150"/>
</bml>