This widget can be used to show one single image based on a URL or Base64 encoded image and mimeType. The url in the model is leading.

Model using URL

    "type": "image",
    "url": ""

Model using Base64 encoded image

    "type": "image",
    "mimeType": "image/png",
    "base64": ""

The following MIME types are considered safe for use on web pages and supported by modern web browsers:

File format MIME type File extension(s)

Animated Portable Network Graphics



Bitmap file



Graphics Interchange Format



Microsoft Icon


.ico, .cur

Joint Photographic Expert Group image


.jpg, .jpeg, .jfif, .pjpeg, .pjp

Portable Network Graphics



Scalable Vector Graphics




    "options": {
        "size": "contain"

Possible values for size:

value description


Auto size with aspect ratio. (default)


Width 100 pixels and auto height with aspect ratio.

100px 50px

Width of 100 pixels and height of 50 pixels.

100% 50%

Width of 100 percentage and height of 50 percentage.


Fit with aspect ratio.

Update Behavior

The update logic of the widget accepts a payload which is a string or a JSON object. In case the payload is a string the widget checks whether the string is a JSON string or base64 string. In case the string is base64 encoded, the base64 field in the model will be updated. In case the payload is a JSON string or JSON object the values of the fields url, base64 and mimeType will be used to change the fields in the model accordingly. In case the payload input is neither a base64 encoded or JSON string the value will be used to update the url in the model.


Supported action hooks:

  • onClick: when user clicks on the image.

Example opening a link:

    "type": "image",
    "name": "Random Image",
    "url": "",
    "actions": {
        "onClick": {
            "type": "notify",
            "text": "Image clicked!"