Displaying Image in Node Red Dashboard

Hi, I'm a new node-red user and I'm facing with a small problem. I would like to display a photo from my computer in Dashboard, but unfortunately it doesn't work at all. I know it seems simple, but I have no idea why it doesn't work for me. I've tried various methods, watched YouTube guides, searched the forum for answers, but unfortunately it still doesn't work. Would anyone be able to provide me with some illustrative code/photo with nodes on how to do this? I will be grateful for your help.

Which version of Dashboard are you using?

P.s. welcome to the community!

Actually i don't know how to check my version. But here it's the image.
obraz_2024-10-27_204443934

To be honest I hadn't even heard of this version of dashboard, so unless you are using it for some specific reason I would suggest removing it and installing either

The original dashboard or the new node-red-dashboard (node) - Node-RED. Given that you are a new user and the original dashboard has been depreciated I guess you should go for the new version.

Do backup your flows first, if you need them!

1 Like

Hi, I managed to display the photo in Dashboard. Now I have a question whether it is possible to update it, e.g. every 5 seconds and display a new one saved under the same name. What I mean is that I am making a simple project of a thermal imaging camera and using appropriate functions I manage to obtain a thermal image which I save on my computer in the appropriate folder. And I would like this photo to also update on the dashboard. I have already tried with timestamp and interval, but the photo on the dashboard does not update. Anyone have an idea how to solve this? Below I attach a photo from Node Red.


It isn't a separate Dashboard, it is a set of additional components for Dashboard 1.

It hasn't been updated in over 3 years, refers to having Node.js v8 as a dependency and has a star rating of just 1 from 6 people. So overall, it doesn't look terribly hopeful. It also appears to do things that D1 can already do.

Actually, i have already managed to display a photo. Now i have a question how to actualize a photo which is shown on the dashboard. I described the problem above.

Are you sure, I thought it was a fork of D1, and has now been abandoned.

I don't think you will have much success with help with that dashboard here. I suggest moving either to node-red-dashboard (which is still supported, but is deprecated and is no longer being developed.), or better to @flowfuse/node-red-dashboard.

I have already moved to node-red-dashboard.

So you are not using dashboard-evi any more? Have you uninstalled that package?

What node have you installed to display the image?

Here is what I have right now.

I also found this solution Node-Red Image on Dashboard - Stack Overflow but actually it doesnt work.

Yes, i'm not using dashboard-evi anymore. I uninstalled that package and then i installed node-red-contrib-ui-media and now i'm using this.
image

That does not appear to be maintained either. There are multiple unnadressed issues - see Issues · st-one-io/node-red-contrib-ui-media · GitHub

Possibly someone can suggest a better way.

You risk invoking The Wrath Of dceejay if you call that your dashboard !

Just in case you are in any doubt, the Node-red editor is accessed at IPAddress:1880
While the dashboard is at IPAddress:1880/dashboard or IPAddress:1880/ui depending on the version.

1 Like

I know this is not a dashboard. Right now my dashboard looks like this (photo). But still i can't update the displayed photo. Any ideas how can i do this?

Show us the message you are sending to update the image.

The only similar situation in my flows, probably not very relevant for you ...

I periodically retrieve the latest yr.no meteogram for a given location using an exec node and curl.

"curl https://www.yr.no/en/content/2-2281996/meteogram.svg -o /home/pi/.node-red/node-red-static/yr.no/2-2281996.svg"

And I have a watch node pointed to that file and a template to display the image.
image

<div class="norway">
    <img src = "/yr.no/2-2281996.svg"></img>
</div>

Whenever I visit the page it seems to be displaying the latest download but I can't be certain that if I sit on the page it will refresh.