# Displaying images on dashboard 2.0

**URL:** <https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [16 November 2024 07:00 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183 "2024-11-16T07:00:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [16 November 2024 07:00 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/1 "2024-11-16T07:00:35Z")

</div>

Is there a simple way to get a file path (anywhere on the device that hosts the node red install) and display that image on the dashboard? I gotten it to work via [this method](https://discourse.nodered.org/t/image-display-on-dashboard/82937/7) but I was wondering if there was a more simple way to do it, espically since I want to eventually display an rtsp feed on the dashboard (still working it out but ffmpeg seems the most relaible)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 November 2024 07:11 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/2 "2024-11-16T07:11:13Z")

</div>

Have you tried the live demos on the [docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html) site?

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [16 November 2024 07:23 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/3 "2024-11-16T07:23:33Z")

</div>

There was also a similar request just discussed that could be of interest. The example flow expects the image data as buffer

> [@Display image in buffer in template node](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001):
>
> hello I have an image which is stored as a buffer. I want to display this image in a template node so that I can view it whilst on my nodered dashboard. In the template node I have the following, but I'm not sure how to display the image in the \<img tag? img src="UNSURE?" id="c5" width="700" height="700"

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [16 November 2024 10:51 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/4 "2024-11-16T10:51:41Z")

</div>

I found the following code which did not show anything, I'm not sure if that's the right one?

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <img height="32px" :src="msg.payload"></img>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 November 2024 10:55 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/5 "2024-11-16T10:55:28Z")

</div>

> [@ath0rus](#):
>
> I'm not sure if that's the right one?

no

> [@Steve-Mcl](#):
>
> Have you tried the live demos

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6efbfc8a38a1dad97799fb666f106beffbdb1d2.png)

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [16 November 2024 11:07 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/6 "2024-11-16T11:07:20Z")

</div>

If that button was a snake i'd be stuffed. Apologies for my inability to see something in plain sight

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [16 November 2024 11:20 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/7 "2024-11-16T11:20:01Z")

</div>

I can't get it to take my photo (from file node) and display that for some reason

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 November 2024 11:49 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/8 "2024-11-16T11:49:51Z")

</div>

Spot the difference...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/07c0e454c2eacf57f616b72c8498fc4483853ce6.png)

PS, use forward quotes like `c:/blah/blah`

Lastly, if Node-RED is not running under the `SmolPC` account, it wont have access to your desktop. Always better to put shared resources in a shared (non user) directory. In fact, better still, put the images in a directory called `images` inside the `.node-red` folder then just use `images/my-image.jpg`

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [16 November 2024 13:51 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/9 "2024-11-16T13:51:24Z")

</div>

I'm running Node-RED on a Raspberry Pi so I just quickly tried. I did put a simple image (meter.jpg) in the .node-red directory. It worked as expected. Please be sure that the file node outputs a single buffer

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/77567ea8e008a972e4561adc686920f2038d1e0f.png)

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

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [16 November 2024 22:57 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/10 "2024-11-16T22:57:22Z")

</div>

ahh ok, thats how you did that, Once i had the image in that folder (i had to change the file path for windows) I had no issues displaying it as I could use the filename in the img src tag, I was just wondering if there was a way to display an image without needing to save it there first. The reson I say this is if I use ffmpeg to pull a frame (or video) off a rtsp camera I can display it right away without needing to save (as such).

Doing this will also help with an upcoming project, I am going to render an animation from blender which will have a few thousand frames (possibly) and I want a way to see what was the last frame rendered and frame count (read from file name), the thing is that the image won't be store on a device that has Node red (aka a Nas) and I will need to perodically check the nas folder

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [17 November 2024 06:18 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/11 "2024-11-17T06:18:42Z")

</div>

> [@ath0rus](#):
>
> I was just wondering if there was a way to display an image without needing to save it there first

Of course it is, that is what my example shows with the MQTT node. Myself I send image data from all my surveillance cameras over my network as buffers via MQTT

To add frame counter and to store the last frame is also pretty simple to add in Node-RED. Just count the number of received messages with image data, store and then update/overwrite to the latest image data. This is of course only valid for images being sent to Node-RED. If you handle this elsewhere you have to handle this in that environment

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [17 November 2024 06:30 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/12 "2024-11-17T06:30:53Z")

</div>

Im not sure why but that seems to now work, It may have been that I didn't inject the image properly or something. Is there a way to get rid of the text and just have the image?

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [17 November 2024 06:57 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/13 "2024-11-17T06:57:18Z")

</div>

In template node, just comment out one line

```auto
<template>
    <div>
        <!-- Image src: {{ info || 'none' }} -->
        <v-img
            v-if="msg.payload"
            :width="msg.width || 150"
            aspect-ratio="msg.aspec || 16/9"
            cover
            :src="msg.payload"
    ></v-img>
    </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [17 November 2024 07:17 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/14 "2024-11-17T07:17:51Z")

</div>

Thanks for the help, that does exactly what I want. I will mark a solution soon

---

<div class="post-metadata">

**Author:** ![ath0rus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ath0rus/32/95404_2.png) [@ath0rus](https://discourse.nodered.org/u/ath0rus)\
**Post date:** [17 November 2024 07:24 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/15 "2024-11-17T07:24:05Z")

</div>

For anyone finding this thread, This is the answer that worked with me

> [@krambriw](#):
>
> There was also a similar request just discussed that could be of interest. The example flow expects the image data as buffer

I found you only need the following code in the template node to work:

> [@krambriw](#):
>
> In template node, just comment out one line
> 
> ```auto
> <template>
> <div>
> <!-- Image src: {{ info || 'none' }} -->
> <v-img
> v-if="msg.payload"
> :width="msg.width || 150"
> aspect-ratio="msg.aspec || 16/9"
> cover
> :src="msg.payload"
> ></v-img>
> </div>
> </template>
> 
> ```

Thanks to @krambriw for being super helpful for this one

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 December 2024 07:24 UTC](https://discourse.nodered.org/t/displaying-images-on-dashboard-2-0/93183/16 "2024-12-01T07:24:25Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.