getting started
premium components
deprecated components
Image
The image component is used to display images.
Schema
Below are two examples of the schema required to define an Image.
{
"type": "Image",
"options": {
"image_url": "https://image.io/ijoh943.jpg"
}
},
{
"type": "Image",
"options": {
"base64": "poiu49ht3...",
"caption": "Lorem ipsum dolor sit amet"
}
}
Description
Key | Description |
---|---|
image_url | The URL of the image. Only JPG, PNG, GIF and WebP supported. (Optional if base64 is specified.) |
base64 | Optional. Base64 encoded string of the image. |
base64_extension | Optional. The extension of the base64 encoded image data. Defaults to png . Allowed values include jpeg and png . |
width | Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null . |
caption | Optional. Caption to add below the image. |
horizontal_margin | Optional. Margin added horizontally to the element. Defaults to 0. |
vertical_margin | Optional. Margin added vertically to the element. Defaults to 1. |
text_size | Optional. Sets the text size. Defaults to sm . For text sizing options, see below for more details. |
text_colour | Optional. Sets the text colour using one of the named colour theme variables. Refer to themes for more details. |
rounded | Optional. Enables rounded corners on the image. Defaults to false . |
bg_colour | Optional. Sets the background colour using one of the named colour theme variables. Refer to themes for more details. If enabled, the border is disabled and rounded corners on the bottom of the image are disabled. |
border_colour | Optional. Sets the border colour using one of the named colour theme variables. Refer to themes for more details. |
enable_border | Optional. Enables the border below the caption text. Defaults to true . |
When using the
image_url
key, ensure the image you are linking to has a size of less than 2 MB.
Text size
The fotextnt size can be overriden using the text_size
key, and can take on any of the
following values (in increasing order):
xs
sm
lg
xl
2xl
3xl
4xl
Layout
By default, the images will be scaled proportionally to fit within the confines of the region of the report they are added to. This means there may be white space around the image, as it attempts to maintain the aspect ratio.
Width
For details on the width
key, please see here.
Markdown support
The text added to the caption
key supports markdown. This means you can
achieve the following:
- Bold text by placing text within double asterisks e.g.
**Text**
- Italic text by placing text within underscores e.g.
_Text_
- New lines using the characters
\n\n
- Heading styles 1-4 using
#
symbols e.g.# Heading One
,## Heading Two
. - Hyperlinks using the syntax
[Text to hyperlink](https://www.google.com)
Providing the image data
Images can be provided in one of two ways, either via providing an external
web-accessible URL, or by base64 encoding the image. Providing an external
URL is the preferred way, as this greatly reduces the size of the JSON payload
being POSTed to the API. Please note, you should only specify either the
image_url
key or the base64
key.
As a hosted image
The recommended way to provide a URL for your image is to host it on a cloud storage solution such as Amazon S3 / Google Cloud Storage buckets / Azure Blob Storage. The supported image formats are:
- JPG
- PNG
- BMP
- GIF
As a base 64 encoded image
If hosting your image is not an option, you can base 64 encode the image and
provide the string in the base64
key. Please ensure the base 64 encoded string
is using the UTF-8 character set.
Example

Missing something?
Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev