Show picture from URL stored in database

Grafana Dashboards
1

Hi,

I’m storing urls to pictures in a database (weather icons) and I would like to show the latest picture in Grafana. Is that possible? How should I do that?

Thanks for your help!

2

Hi，did you solve it？same request with me

3

Hi,

No, unfortunately not! So if anyone has a clue, please help us out! :wink:

4

You can do it with the “old” table panel which is still usable in Grafana v9 although it’s kind of hidden away now - you have to create a “new” table panel in the Grafana GUI and then inspect and edit the panel JSON to change:

"type": "table",
to:
"type": "table-old",

Then apply that change, and add a column style of type string and enable the “Sanitize HTML” option.

Finally in that table string field you select the HTML to render your image e.g. something like:

select CONCAT('<img src="', table.url_field, '" height="200">') as 'img' 
from ...
where ...

Although if you are rendering local stored images then they must be somewhere in the Grafana directories that Grafana has access to (like /usr/share/grafana/public/pics). In older versions of Grafana (at least on Ubuntu deb) I could store images anywhere and put a symbolic link in the Grafana directories but now with Grafana v9 version it seems symbolic links are no longer supported so I had to do a bind mount instead.

In my opinion the Sanitize HTML option is the single most powerful feature of the old table panel, I still can’t understand why it was removed in the new table panel. My tables can have not only images but styles, fonts, emojjis, icons, colours, the sky is the limit.

5

Hello!
Now, in Grafana v11.0.0 i cannot use ‘table-old’ neither change it in the JSON :frowning:
Someone know what could i do?
Thanks!

6

Welcome @Sara_Xouba to the Grafana forum.

I have images displaying in a table using this code (datasource is MSSQL):

SELECT concat('data:image/png;base64,',	
CAST('' as XML).value('xs:base64Binary(sql:column("img"))', 'VARCHAR(MAX)')) AS PartImage
from myimages

image

image

EDIT: The above is working on v10.4 OSS using the Table visualization. Not sure what will happen when I move to v11.

7

Thanks for replying me :slight_smile: ! But still, it doesn’t work for me
Maybe it’s because I’m using dynamic images which I get from an URL, I don’t know
I will keep trying to figure out something, thanks a lot!

8

Just reference the url column in your <a href={{ url }} /> html tag