---
title: "Images"
slug: "images-filter"
updated: 2026-02-25T17:33:24Z
published: 2026-02-25T17:33:24Z
canonical: "learn.servitly.com/images-filter"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Images

A set of functions which can be used to display images in different ways.

![Images](https://components-manager.servitly.com/components/Images_1/IMAGES/_screenshot?owner=AG_Servitly)

# How it works

This filter and its variants can be applied to:

- metrics whose value is a URL or a byte-encoded image.
- properties whose value is a URL or the property type is *FILE*.

Null or empty values will generate an empty image.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/samples.png?sv=2026-02-06&spr=https&st=2026-10-16T21%3A28%3A09Z&se=2026-10-16T22%3A28%3A09Z&sr=c&sp=r&sig=duEqsHnVSdeirvjw5Kns2coMMcW%2BlXoutsVsOvTwOsM%3D)

The *panzoom* option can be used to display a small image preview, and when the image is clicked a popup will display the full-size image with also pan and zooming features.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/panzoom.png?sv=2026-02-06&spr=https&st=2026-10-16T21%3A28%3A09Z&se=2026-10-16T22%3A28%3A09Z&sr=c&sp=r&sig=duEqsHnVSdeirvjw5Kns2coMMcW%2BlXoutsVsOvTwOsM%3D)

# Filter Variants

The set of predefined filter variants that can be used to format values.

| *Image* | Displays an image without any scaling **Name**: *image* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| --- | --- |
| *Image (pan and zoom)* | Displays an image (width 256px) allowing also mouse pan and zooming. **Name**: *image_panzoom* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| *Image (width 128px)* | Displays an image by scaling its width to 128px. **Name**: *image_w128* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| *Image (width 256px)* | Displays an image by scaling its width to 256px. **Name**: *image_w256* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| *Image (width 64px)* | Displays an image by scaling its width to 64px. **Name**: *image_w64* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| *Image (bitmap encoded)* | Displays an image obtained by converting a bitmap encoded string to a Base64 PNG. **Name**: *image_bitmap_to_png* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |
| *Image (width 32px)* | Displays an image by scaling its width to 32px. **Name**: *image_w32* **Input Types**: *STRING, FILE* **Output Type**: *HTML* |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *panzoom* | The flag indicating whether the pan and zooming function are enabled (default false). | {"panzoom": true} |
| *width* | The image desired width expressed in pixels or percentage (default 100%). | {"width": "256px"} |
| *converter* | The image converter to be applied before visualization (default none). | {"converter": "BITMAP_TO_PNG"} |

  

Example of defining a custom image filter variant into the [Custom Filters](/docs/custom-filters) component.

```javascript

        exports.image_w128 = ImageViewerFilter({ "width": "128px" });
    
```