# How to add Picture on Dashboard

**URL:** <https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791>\
**Category:** Dashboard\
**Created:** [26 August 2019 14:38 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791 "2019-08-26T14:38:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dodong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dodong/32/11363_2.png) [@Dodong](https://discourse.nodered.org/u/Dodong)\
**Post date:** [26 August 2019 14:38 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/1 "2019-08-26T14:38:40Z")

</div>

hi everyone.  
Please help

how to add factory map image layouts according to the image below.

main points how to add images in ".jpg" format to the dashboard.!

[Presentation1|690x388](https://discourse.nodered.org/uploads/short-url/Ai4wj3ro3I7jjjyzOtpqul9BtJm.jpeg)

Thank you.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [26 August 2019 14:52 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/2 "2019-08-26T14:52:38Z")

</div>

That image wasn’t from Node-RED.

But if you want to add an image to the dashboard in Node-RED try searching the forum for “image dashboard” it has come up lots of times before.

---

<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:** [26 August 2019 15:05 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/3 "2019-08-26T15:05:53Z")

</div>

A quick search of this forum (like 30 secs looking around) and this looks to be the easiest...

[https://www.npmjs.com/package/node-red-contrib-ui-media](https://www.npmjs.com/package/node-red-contrib-ui-media).

There is other was (like having a `public` folder with images in and using the ui\_template node) but it's a bit more advanced. Involves editing setting.js but it is documented (see documentation link top of this forum)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [26 August 2019 16:24 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/4 "2019-08-26T16:24:42Z")

</div>

Or there is this one under development - that may be useful if you have an svg image and want to make it interactive.

> [@Announce node-red-contrib-ui-svg : feedback request](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431):
>
> Hi folks, An interactive floorplan is already a long time on top of my TODO list, so I developed an alfa version of [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)... It would be nice if you could read the readme documentation, test it and give some 'constructive' feedback. Keep in mind that this is an early alfa version, that I published only to start the discussion! I have already registered a list of known [issues](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues). For most of those issues I will need some input from the community. I'm not going to repeat all i…

---

<div class="post-metadata">

**Author:** ![Dodong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dodong/32/11363_2.png) [@Dodong](https://discourse.nodered.org/u/Dodong)\
**Post date:** [27 August 2019 06:29 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/5 "2019-08-27T06:29:31Z")

</div>

Hi Steve

i have been to used ui media but have stuck on link as per picture below

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

Please can you help for this issue.

Thank You  
Dodong

---

<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:** [27 August 2019 07:51 UTC](https://discourse.nodered.org/t/how-to-add-picture-on-dashboard/14791/6 "2019-08-27T07:51:42Z")

</div>

I've never used it but my guess is you need to first upload the selected image (apparently a button next to image selection) and deploy before you get a link.