Search code examples
node.jsnode-red

Node Red Dashboard Include Images

I'm creating an application using node-red and creating the ui with node-red-dashboard.

I have included some api calls and based on the response I want to change the Image source of the template control.

<img src="/home/pi/Destkop/WeatherImages/sun.png">

So I used the absolute path to the image. But the image isn't get loaded. There is a symbol which indicates that and the source of the image is set to localhost:1880/sun.png.

Where do I need to place the Image? What Path do I need to use?

Solution

  • You can not use local paths for files served from the web server built into Node-RED as the browser accessing the page may not be on the same machine that Node-RED is running on.

    In the settings.js file (which will be in ~/.node-red) there is a setting called httpStatic you can use this to specify a directory that Node-RED will server up static content from.

    ...
// 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/',
...

    If you set that to /home/pi/Destkop/WeatherImages as follows:

    ...
// 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/pi/Desktop/WeatherImages',
...

    you can then set the image src as follows:

    <img src="/sun.png">