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 | The top margin of the image, allowing space to be added above the image. |
| marginBottom | No | Number | The bottom margin of the image, allowing space to be added below the image. |
| marginLeft | No | Number | The left margin of the image, allowing space to be added to the left side of the image. |
| marginRight | No | Number | The right margin of the image, allowing space to be added to the right side of the image. |
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>