Displaying a local image in Node-RED dashboard using http endpoints

Question

I need to display an image on Node-RED dashboard using http end points. I have done the followings:

Kept the image in /home/pi/Pictures.
Edited httpStatic: '/home/pi/Pictures', in setting.js file.
Tried using slash "/" before image name in src in html image tag and without "/" but nothing works.

Here is my flow for reference:

[
  {
    "id": "7b08a202.a1670c",
    "type": "http in",
    "z": "e5e5e9b.2a8cc18",
    "name": "",
    "url": "/display-image",
    "method": "get",
    "upload": false,
    "swaggerDoc": "",
    "x": 112,
    "y": 73,
    "wires": [
      [
        "35ca7d97.da9dd2"
      ]
    ]
  },
  {
    "id": "f8cf60ed.74b87",
    "type": "http response",
    "z": "e5e5e9b.2a8cc18",
    "name": "",
    "statusCode": "",
    "headers": {

    },
    "x": 458,
    "y": 70,
    "wires": [

    ]
  },
  {
    "id": "35ca7d97.da9dd2",
    "type": "template",
    "z": "e5e5e9b.2a8cc18",
    "name": "SLD View",
    "field": "payload",
    "fieldType": "msg",
    "format": "handlebars",
    "syntax": "mustache",
    "template": "<!DOCTYPE html>\n<html>\n    <body>\n        <img src=\"Barsu_SLD.png\" alt=\"Overview\" width=1000px; height=800px>\n    \n    </body>\n</html>",
    "output": "str",
    "x": 310,
    "y": 136,
    "wires": [
      [
        "f8cf60ed.74b87"
      ]
    ]
  },
  {
    "id": "2beda89c.ca2b98",
    "type": "ui_template",
    "z": "e5e5e9b.2a8cc18",
    "group": "d9e6ccf5.f58ab",
    "name": "Display Button",
    "order": 0,
    "width": 0,
    "height": 0,
    "format": "<!DOCTYPE html>\n<html>\n    <head>\n        <style>\n            .button {\n                background-color: #086A87;\n                border: none;\n                color: white;\n                padding: 16px 32px;\n                text-align: center;\n                text-decoration: none;\n                font-size: 16px;\n                margin: 3px 1px;\n                cursor: pointer;\n                border-radius: 4px;\n            }\n            .button_over:hover {\n                background-color: #187A97;\n                color: white;\n            }\n        </style>\n    </head>\n    <body>\n        \n        <a href=\"http://127.0.0.1:1880/BARSU-SLD/\" class=\"button button_over\" target=\"_blank\" >SLD View</a>    \n        \n    </body>\n </html>",
    "storeOutMessages": false,
    "fwdInMessages": true,
    "templateScope": "local",
    "x": 112,
    "y": 195,
    "wires": [
      [

      ]
    ]
  },
  {
    "id": "d9e6ccf5.f58ab",
    "type": "ui_group",
    "z": "",
    "name": "Test",
    "tab": "1474e3ec.fb238c",
    "disp": true,
    "width": "6"
  },
  {
    "id": "1474e3ec.fb238c",
    "type": "ui_tab",
    "z": "",
    "name": "Home",
    "icon": "dashboard"
  }
]

Any help is highly appreciable.

I am not able to display the image I have used in the template ( Barsu_SLD.png). Can you tell me where i have to put the image so that i will be able to display it on the dashboard? — Gautam
If you have your httpStatic path set up correctly, then your node-red server can serve the image file using the url http://localhost:1880/Barsu_SLD.png (assuming you are using the same host and default port). Please show us the initial lines from the node-red console log after a restart... — SteveR

Julian Knight Julian Knight · Accepted Answer · 2018-02-12T00:26:57

If you have httpStatic set to ~/.node-red/public, for example using the following in settings.js

httpStatic: path.join('', 'public'),

and if you have a file: ~/.node-red/public/images/myimage.png

Then your url should use the html

<img src="/images/myimage.png">

Note the initial / and the lack of any http://localhost:1880. You don't need to supply the http part since your browser will automatically match that up for you.

Just note also that if you have set httpRoot to something, you need to prefix your URL's with that as well.

Displaying a local image in Node-RED dashboard using http endpoints

1 Answers