Getting image in dashboard

[BartButenaers]

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

[Tobi]

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

[BartButenaers]

Hey Tobi (@Tobi),
I have never used Node-RED on windows, but perhaps you can find some more information in this discussion?

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:

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

[Tobi]

Hey Bart,

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

[ukmoose]

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 ?

[Tobi]

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}]

[dceejay]

and where exactly on disk is the image ?

[Tobi]

Ok I got it, thanks for help

[dynamicdave]

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.

[{"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}]

[ukmoose]

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.

[Tobi]

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