How to use base64 encoded images in datatable?


I am trying to figure out the new feature to display a base64 encoded images in a table, but am a bit stuck and don’t know how the image should be encoded.

I have an influxDB, into which I am inserting a base64 encoded jpg image. The payload I am pushing to influxDB looks like this (in this example, just a red dot I found on stack overflow):

  sensor_data,sensor=office_camera imageData="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

In my panel, I have the following influxDB query:

SELECT first("imageData") FROM "sensor_data" WHERE ("sensor" = 'office_camera') AND $timeFilter GROUP BY time(1m) fill(null)

And I get a result set that I can display:

But if I try and override the Cell display mode for the field to “Image”:

I get this:


Should I prefix my data in some way?

If I copy the value from the table in Grafana, and pipe it through base64 to decode it, I get the red dot jpeg image, which I can open in an image viewer.

Thanks for a nice product!

Basically, what I want to do, is to slowly get to mimik the awesome image timeline shown in

(for example 41min23sec into the video)

If someone would have a pointer to how to create such a timeline, I would be extremely thankful.

I figured it out.

I have to prefix the base64 data with “data:image/jpg:base64” (plus a space, then my base64 string).

cat<<EOT > payload.file
  sensor_data,sensor=office_camera imageData="data:image/jpg;base64, $(cat currentImage.jpg | base64)"

curl -i -XPOST "http://${influxHost}:${influxPort}/write?db=${influxDb}" --data-binary @payload.file

I am still curious on how to create a timeline in a graph from this. =)


He names the used panels in his project page (if you watch to the end of the video, there is the GitHub project named. Within the project he names the used panels.
It seems it might be this one: GitHub - ryantxu/image-viewer-panel: Image Viewer panel