# Getting image in dashboard

**URL:** <https://discourse.nodered.org/t/getting-image-in-dashboard/228>\
**Category:** Dashboard\
**Created:** [18 May 2018 09:51 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228 "2018-05-18T09:51:52Z")\
**Posts on this page:** 11\
**Page:** 3

<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:** [12 February 2019 21:46 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/41 "2019-02-12T21:46:59Z")

</div>

Hey @Tobi,

My response is not really a direct answer to your question, but last week @steuck13 has released a very nice new UI node: [node-red-contrib-ui-media](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669). That node allows to display **video** or **images** in the dashboard. Perhaps you can try that one, and give the author some feedback in that discussion...

Good luck!  
Bart

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [13 February 2019 13:47 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/42 "2019-02-13T13:47:58Z")

</div>

thanks for the tip.

But what exactly do I have to enter in the httpStatic so the pictures are available?  
I had the project run on a Raspberry PI before and now I want to do that on my Windows laptop, the only thing that does not work is showing the pictures

---

<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 February 2019 19:59 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/43 "2019-02-13T19:59:31Z")

</div>

Hey Tobi (@Tobi),  
I have never used Node-RED on windows, but perhaps you can find some more information in this [discussion](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/4)?

When you get the **404** error, you can also find in your browser's developer tools the complete **path** where your browser is going to search your image. For example in the Chrome developer tools:

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

Whey you hoover over the entry (or click on it), you will see the path of the image. Perhaps you can analyse that way better why your path isn't sufficient ...

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [14 February 2019 08:10 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/44 "2019-02-14T08:10:00Z")

</div>

Hey Bart,

thanks for the support,  
this is the error in the inspector

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

---

<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:** [14 February 2019 08:28 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/45 "2019-02-14T08:28:11Z")

</div>

127.0.0.1 means the local machine. i.e. the one you are running the browser on

Is that the same machine you are running Node-RED on?

Also you see /ui in the URL  
Have you tried the suggestion in this post in this thread [Getting image in dashboard](https://discourse.nodered.org/t/getting-image-in-dashboard/228/37?u=ukmoose) ?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [14 February 2019 08:41 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/46 "2019-02-14T08:41:44Z")

</div>

yes it is the same machine.

this is my flow

`[{"id":"e006c3a8.4bb48","type":"inject","z":"bb1612a4.940d","name":"","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":427,"y":320,"wires":[["581b2992.122438","9abed02b.1ec4e"]]},{"id":"581b2992.122438","type":"function","z":"bb1612a4.940d","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n // return {payload:\"/grunein.png\"};\n return {payload:\"/hintergrundbild.png\"};\n}\nelse{\n return{payload:\"/grunaus.png\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":760,"y":280,"wires":[["206daad8.a110a6","9abed02b.1ec4e"]]},{"id":"206daad8.a110a6","type":"ui_template","z":"bb1612a4.940d","group":"bc604a33.6f6eb8","name":"Türzuhaltung","order":2,"width":"4","height":"4","format":"<img style=\"width:200px\" ng-src=\"{{msg.payload}}\" />\n<!--\n<style>\n #Tab_17_Workflow,\n #Tab_17_Workflow_cards {\n background: rgba(1,1,1,0);\n border: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n }\n #Tab_17_Workflow,\n #Tab_17_Workflow md-card{\n background: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n border: (1,1,1,0);\n }\n</style>\n-->\n<!--\n<style>\n #Home_Türzuhaltung,\n #Home_Türzuhaltung_cards{\n position: fixed;\n top: 12vh;\n right: 48vw;\n height: 40vh;\n }\n</style>\n-->","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":1050,"y":280,"wires":[[]]},{"id":"9abed02b.1ec4e","type":"debug","z":"bb1612a4.940d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":1020,"y":358,"wires":[]},{"id":"bc604a33.6f6eb8","type":"ui_group","z":"","name":"Output","tab":"27d02dc5.689c52","order":5,"disp":false,"width":"6","collapse":false},{"id":"27d02dc5.689c52","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]`

---

<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:** [14 February 2019 08:53 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/47 "2019-02-14T08:53:19Z")

</div>

and where exactly on disk is the image ?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [14 February 2019 09:25 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/48 "2019-02-14T09:25:38Z")

</div>

Ok I got it, thanks for help

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [14 February 2019 09:53 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/49 "2019-02-14T09:53:09Z")

</div>

As mentioned previously by Bart, the node-red-contrib-ui-media node is dead easy to use and doesn't require any adjustments to your settings file.

Cheers from David.

```auto
[{"id":"5e9321be.95839","type":"ui_media","z":"c6ad8a98.de0c","group":"99e9bd3d.c0982","name":"","width":"10","height":"8","order":4,"category":"my_images","file":"mic_op_amp.jpg","layout":"center","showcontrols":true,"loop":true,"onstart":false,"scope":"local","x":590,"y":180,"wires":[["82cfc3d6.f14828"]]},{"id":"b9e544a7.1200c8","type":"change","z":"c6ad8a98.de0c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"images/mic_op_amp.jpg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":140,"wires":[["5e9321be.95839"]]},{"id":"7a19e381.5f8804","type":"ui_button","z":"c6ad8a98.de0c","name":"","group":"99e9bd3d.c0982","order":5,"width":0,"height":0,"passthru":false,"label":"Op Amp","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":140,"wires":[["b9e544a7.1200c8"]]},{"id":"502749ba.e7b138","type":"change","z":"c6ad8a98.de0c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"images/wemos.jpg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":220,"wires":[["5e9321be.95839"]]},{"id":"bfdef4d4.8c9fb8","type":"ui_button","z":"c6ad8a98.de0c","name":"","group":"99e9bd3d.c0982","order":6,"width":0,"height":0,"passthru":false,"label":"Wemos","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":220,"wires":[["502749ba.e7b138"]]},{"id":"82cfc3d6.f14828","type":"debug","z":"c6ad8a98.de0c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":770,"y":180,"wires":[]},{"id":"99e9bd3d.c0982","type":"ui_group","z":"","name":"Description","tab":"d9c42b8a.2546d8","order":3,"disp":true,"width":"20","collapse":false},{"id":"d9c42b8a.2546d8","type":"ui_tab","z":"","name":"submit form","icon":"dashboard","disabled":false,"hidden":false}]

```

 ![ScreenShot025](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4818bb3afd03e7ab57ce393e50968d881e081d9e.png)

---

<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:** [14 February 2019 10:21 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/50 "2019-02-14T10:21:21Z")

</div>

It would be great if you could summarise what the problem was an what fixed it, so the next person finding this thread can get quickly to the answer.

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [17 February 2019 08:40 UTC](https://discourse.nodered.org/t/getting-image-in-dashboard/228/51 "2019-02-17T08:40:01Z")

</div>

I took the wrong path into the httpStatic function.  
I wrote the german path and not the correct english

[Previous page](https://discourse.nodered.org/t/getting-image-in-dashboard/228.md?page=2)