# Displaying Image in Node Red Dashboard

**URL:** https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720
**Category:** Dashboard
**Tags:** node-red-dashboard, function-node, ui-template
**Created:** [27 October 2024 19:09 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720 "2024-10-27T19:09:33Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [27 October 2024 19:09 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/1 "2024-10-27T19:09:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [27 October 2024 19:36 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/2 "2024-10-27T19:36:08Z")

</div>

Which version of Dashboard are you using?

P.s. welcome to the community!

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [27 October 2024 19:45 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/3 "2024-10-27T19:45:03Z")

</div>

Actually i don't know how to check my version. But here it's the image.  
 ![obraz_2024-10-27_204443934](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8ca42bbd7285e4d12c802c126be0ae194f27ef65.png)

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 October 2024 02:00 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/4 "2024-10-28T02:00:07Z")

</div>

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](https://flows.nodered.org/node/node-red-dashboard) or the new [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/@flowfuse/node-red-dashboard). 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!

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 17:36 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/5 "2024-10-28T17:36:01Z")

</div>

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.

 ![obraz_2024-10-28_183420593](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d761c1f511ae0e8008dba7ee1dafac06f9719ce8.png)  
 ![obraz_2024-10-28_183451566](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0deb269f26e84f075c27c6a1a9d567e29807e69a.png)

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 17:37 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/6 "2024-10-28T17:37:20Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5b86721cc6d4e46a7d343ed319ebdaef471484a8.png)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 October 2024 17:43 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/7 "2024-10-28T17:43:28Z")

</div>

> [@Sean-McG](#):
>
> 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

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.

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 17:47 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/8 "2024-10-28T17:47:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [28 October 2024 17:59 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/9 "2024-10-28T17:59:05Z")

</div>

> [@TotallyInformation](#):
>
> It isn't a separate Dashboard, it is a set of additional components for Dashboard 1

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

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [28 October 2024 18:01 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/10 "2024-10-28T18:01:47Z")

</div>

> [@grzegorzjanusz](#):
>
> 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 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.

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 18:10 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/11 "2024-10-28T18:10:45Z")

</div>

I have already moved to node-red-dashboard.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [28 October 2024 18:19 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/12 "2024-10-28T18:19:02Z")

</div>

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

What node have you installed to display the image?

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 18:20 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/13 "2024-10-28T18:20:18Z")

</div>

Here is what I have right now.

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 18:21 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/14 "2024-10-28T18:21:35Z")

</div>

I also found this solution [Node-Red Image on Dashboard - Stack Overflow](https://stackoverflow.com/questions/63077927/node-red-image-on-dashboard) but actually it doesnt work.

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [28 October 2024 18:31 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/15 "2024-10-28T18:31:31Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf91d88d44023c94fbd28300a898138629a11777.png)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [28 October 2024 18:41 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/16 "2024-10-28T18:41:24Z")

</div>

> [@grzegorzjanusz](#):
>
> node-red-contrib-ui-media

That does not appear to be maintained either. There are multiple unnadressed issues - see [Issues · st-one-io/node-red-contrib-ui-media · GitHub](https://github.com/st-one-io/node-red-contrib-ui-media/issues)

Possibly someone can suggest a better way.

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [28 October 2024 19:13 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/17 "2024-10-28T19:13:24Z")

</div>

> [@grzegorzjanusz](#):
>
> ![obraz_2024-10-28_183420593](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d761c1f511ae0e8008dba7ee1dafac06f9719ce8.png)

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.

---

<div class="post-metadata">

### Author: ![grzegorzjanusz](https://avatars.discourse-cdn.com/v4/letter/g/cab0a1/32.png) [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)
#### Post date: [29 October 2024 11:03 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/18 "2024-10-29T11:03:13Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/3867dba5bf8fdff3738c493fa1cab9e0b1c8f501.png)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [29 October 2024 11:07 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/19 "2024-10-29T11:07:28Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [29 October 2024 11:24 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720/20 "2024-10-29T11:24:15Z")

</div>

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.

```auto
"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/optimized/3X/1/0/103a787660b548f2dae0f8a880183e52e09a0187_2_517x48.png)

```auto
<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.

[Next page](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720.md?page=2)
