Getting image in dashboard

I can not load the image in my browser, so I consider that the error must exist in the file settings.js

You did restart node-red after changing the settings.js file, right? Did you also follow this note in the settings file, and change the editor's root url to some other path?

// By default, the Node-RED UI is available at http://localhost:1880/
// The following property can be used to specify a different root path.
// If set to false, this is disabled.
httpAdminRoot: '/admin',
// 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: 'C:\\Pictures',

What errors or status code is returned when you try to load the image in your browser? (check the dev console's "Network" tab)

To restart node-red there is some command ?, usually I just stop the node and reload it.
Captura2 Also, in the file setting.js I have it as the capture.

I did not understand very well, excuse me should I change something in this route: httpAdminRoot: '/admin'?

Your settings.js file looks fine... but it is only read one time, when the node-red service is started.

I cannot tell you how to restart node-red, since there are many ways to set up a system to start running automatically. If you didn't set it up, then you may need to talk to whoever set it up for you... I would start by looking at the installed services, and if there is one listed then use the buttons to stop/start it.

Can you see the console log output? If so, then it will show you what directory is being used to serve static files. If you can paste the log output from when the system is started, the answer will probably be obvious to someone here.

I think the modifications I make in the settings.js file are not being made; really that is the problem

Thank you Shrickus

Just a note about using a relative URL from the Dashboard ui:
When viewing the dashboard, your browser considers that you are in the 'ui' directory.
For example:
http://192.168.43.106:1880/ui/
If your settings.js file is set to serve static files in /home/pi/.node-red/static/,
your browser will consider this static directory as root.
You need a ../ to move up one directory from 'ui' to root.
A relative URL from the 'ui' directory would look like this (assuming msg.payload has the image name):

<img src="../{{ msg.payload }}">

I changed the httpStatic to 'c:\Desktop'

Welcome to Node-RED

12 Feb 18:31:52 - [info] Node-RED version: v0.19.4
12 Feb 18:31:52 - [info] Node.js version: v10.8.0
12 Feb 18:31:52 - [info] Windows_NT 10.0.17134 x64 LE
12 Feb 18:31:52 - [info] Loading palette nodes
12 Feb 18:31:56 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
12 Feb 18:31:56 - [info] Dashboard version 2.13.2 started at /ui
12 Feb 18:31:56 - [warn] ------------------------------------------------------
12 Feb 18:31:56 - [warn] [node-red/tail] Not currently supported on Windows.
12 Feb 18:31:56 - [warn] ------------------------------------------------------
12 Feb 18:31:56 - [info] Settings file : \Users\tobi.node-red\settings.js
12 Feb 18:31:56 - [info] HTTP Static : C:\Desktop
12 Feb 18:31:56 - [info] Context store : 'default' [module=memory]
12 Feb 18:31:56 - [info] User directory : \Users\tobi.node-red
12 Feb 18:31:56 - [warn] Projects disabled : editorTheme.projects.enabled=false
12 Feb 18:31:56 - [info] Flows file : \Users\tobi.node-red\start
12 Feb 18:31:57 - [info] Server now running at http://127.0.0.1:1880/
12 Feb 18:31:57 - [warn]

and this is my function node

> 
> if(msg.payload==1){
>    // return {payload:"/grunein.png"};
>    return {payload:"/windows10.jpg"};
> }
> else{
>     return{payload:"/grunaus.png"};
> }
> return msg;

but the Dashboard shows no Picture

the desktop not really being a good location to store your files for this as everything else in that directory is also potentially accessible.

What error messages does your browser have? Use the developer tools and check to see the path.

image
thats the error message

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

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

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:

image

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

1 Like

Hey Bart,

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

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 ?

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

and where exactly on disk is the image ?

Ok I got it, thanks for help

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

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.

1 Like

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

3 Likes