Skip to main content

Display Base64 images from any data source

· Updated on September 9, 2023
Mikhail Volkov

The Base64 Image/PDF Panel plugin has recently been upgraded in the Grafana Plugins catalog and now has everything you need to display images from any data source on your dashboards.

The initial version of the Grafana plugin was designed for the project analyzing a camera feed in real-time and simplified the original project by displaying AI-analyzed images on the Grafana dashboard.

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

Updates

Since the original version, the Base64 Image/PDF Panel plugin has achieved the following:

Images, PDFs, Live Camera Feed on Grafana Dashboard.

Getting Started

You can install Base64 Image/PDF Panel from the command line or directly in the Grafana Cloud with the grafana-cli tool.

grafana-cli plugins install volkovlabs-image-panel

In the latest version of Grafana 8.1, you can install standalone plugins from the Grafana Plugins catalog.

Grafana Plugins catalog allows installing plugins directly from the dashboard without restarting the application.
Grafana Plugins catalog allows installing plugins directly from the 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 like data:image/jpg;base64,ENCODED-CONTENT or data:application/pdf;base64,ENCODED-CONTENT.

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

Base64 Image/PDF panel displays an image using the static data source.
Base64 Image/PDF panel displays an image using the static data source.

If the data source returns more than one field of the string type, you can choose the field name in the plugin's options. If the data source returns multiple rows, the image from the last row is displayed in the panel.

The image's dimensions can be automatically adjusted, left as-is, or changed based on the values you specify in the panel settings.

Please check the plugin's repository and let us know if you have any questions or suggestions for future improvements.