Skip to main content

Display Base64 encoded images from any data source on your Grafana dashboard

· 2 min read
Mikhail Volkov

Base64 Image/PDF panel plugin was recently upgraded in the Grafana Catalog and has everything you need to display images from any data source on your dashboards.

The initial version of the Base64 Image/PDF panel for Grafana was created for the project "Analyzing camera feed in real-time" and helped to streamline the original project by displaying AI-analyzed images on the Grafana dashboard.

Analyzing camera feed in real-time using RedisAI, OpenCV-Python, and Redis plugins for Grafana.
Analyzing camera feed in real-time using RedisAI, OpenCV-Python, and Redis plugins for Grafana.

Since the original version, the Base64 panel was

The video version of this article is available on our YouTube channel.

Images, PDFs, Live Camera Feed on Grafana Dashboard.

Getting Started

You can use the grafana-cli tool to install from the command line for standalone Grafana or directly in the Grafana Cloud:

grafana-cli plugins install volkovlabs-image-panel

In the latest version of Grafana 8.1 standalone plugin can also be installed using the Grafana Catalog application:

Grafana Catalog allows installing plugins directly from the Grafana dashboard without restarting the application.
Grafana Catalog allows installing plugins directly from the Grafana dashboard without restarting the application.

Panel Features

The values returned from the data source can be Base64 encoded with or without definition in the format data:image/jpg;base64,ENCODED-CONTENT or data:application/pdf;base64,ENCODED-CONTENT.

If the definition is not provided, the file type is determined automatically based on the first Base64 symbol.

Base64 Image/PDF panel displays an image using the Static data source with custom height and width parameters.
Base64 Image/PDF panel displays an image using the Static data source with custom height and width parameters.

If the data source returns more than one field with string type, you can select the Field Name in the panel's display options, and if the data source returns multiple rows, the panel will display the image from the last row.

The height and width of the image can be auto-adjusted to the panel's size, kept original, or customized based on the field's value, or panel options.