# How to display an image on Node red dashboard using template node

**URL:** <https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734>\
**Category:** General\
**Created:** [13 April 2020 08:51 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734 "2020-04-13T08:51:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jude.Robise](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jude.robise/32/13970_2.png) [@Jude.Robise](https://discourse.nodered.org/u/Jude.Robise)\
**Post date:** [13 April 2020 08:51 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/1 "2020-04-13T08:51:55Z")

</div>

I just wanna display a local path image on node red dashboard using template node.

nothing worked so far. any help would be highly appreciated!  
thanks

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 April 2020 09:04 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/2 "2020-04-13T09:04:55Z")

</div>

Hi Jude,  
This question has already been discussed a few times on this forum. Did you have a look at those discussions already? If so, please explain what you have tried AND what goes wrong. Otherwise people won't be able to help you...  
Bart

---

<div class="post-metadata">

**Author:** ![Jude.Robise](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jude.robise/32/13970_2.png) [@Jude.Robise](https://discourse.nodered.org/u/Jude.Robise)\
**Post date:** [13 April 2020 09:10 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/3 "2020-04-13T09:10:06Z")

</div>

Thanks for the reply... ok i will show the source code (inside template node) that im trying to work with. ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9d6caece66725d2262864fd0a13685ec594ff7a.jpeg)

This doesn't work for me. sorry.

In addition to this i tried to change the httpstatic path in settings.js. That also didnt works so far.

Thanks

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 April 2020 09:38 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/4 "2020-04-13T09:38:30Z")

</div>

Think it is normal that this doesn't work. You ask your browser (which "could" run on every computer all over the world) to access a local directory (on one of the 328 million devices being connected to the internet). So your browser won't know where to get that file... You will need to make that folder public accessible via the Node-red webserver ( indeed via the httpstatic setting). As a result the browser can access files in that directory, but it still won't know what c://... means. There are plenty of good examples available on Discourse, when you search for "_dashboard local image_".

---

<div class="post-metadata">

**Author:** ![danielbolla](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/danielbolla/32/19972_2.png) [@danielbolla](https://discourse.nodered.org/u/danielbolla)\
**Post date:** [13 April 2020 19:44 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/5 "2020-04-13T19:44:38Z")

</div>

Hi Jude,

# Steps

1. There is a `settings.js` file, which contains the path of your static dashboard contents.  
It is usually located in `C:\Users\{{userName}}\.node-red` where `{{userName}}` is your user name.  
Open this file end edit the following line, and save the file.

```auto
...
    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    // httpStatic: '/home/nol/node-red-static/',
    httpStatic: 'C:\Users\{{userName}}\.node-red\static' 
...

```

Again, the `{{userName}}` is your user name.

1. Now create a folder in `C:\Users\{{userName}}\.node-red` called `static`.
2. Put your picture inside
3. Restart your node-red
4. Now you can use the relative path to the image from your `static` folder, just use a `/` before it.

# Example:

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

Daniel

---

<div class="post-metadata">

**Author:** ![machadotiago](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/machadotiago/32/23776_2.png) [@machadotiago](https://discourse.nodered.org/u/machadotiago)\
**Post date:** [14 April 2020 13:42 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/7 "2020-04-14T13:42:20Z")

</div>

Have you tried [https://flows.nodered.org/node/node-red-contrib-ui-media](https://flows.nodered.org/node/node-red-contrib-ui-media)? It supports images and videos, and you can upload the image directly from the Node-RED interface

---

<div class="post-metadata">

**Author:** ![Jude.Robise](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jude.robise/32/13970_2.png) [@Jude.Robise](https://discourse.nodered.org/u/Jude.Robise)\
**Post date:** [15 April 2020 02:37 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/8 "2020-04-15T02:37:14Z")

</div>

thank you for your replies. it worked! 🙂

---

<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:** [29 April 2020 02:37 UTC](https://discourse.nodered.org/t/how-to-display-an-image-on-node-red-dashboard-using-template-node/24734/9 "2020-04-29T02:37:27Z")

</div>

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