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, when inside a Section or Row component with their columns option 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

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.

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