How to display an image on Node red dashboard using template node

I just wanna display a local path image on node red dashboard using template node.

nothing worked so far. any help would be highly appreciated!
thanks

Hi Jude,
This question has already been discussed a few times on this forum. Did you have a look at those discussions already? If so, please explain what you have tried AND what goes wrong. Otherwise people won't be able to help you...
Bart

1 Like

Thanks for the reply... ok i will show the source code (inside template node) that im trying to work with. Capture

This doesn't work for me. sorry.

In addition to this i tried to change the httpstatic path in settings.js. That also didnt works so far.

Thanks

Think it is normal that this doesn't work. You ask your browser (which "could" run on every computer all over the world) to access a local directory (on one of the 328 million devices being connected to the internet). So your browser won't know where to get that file... You will need to make that folder public accessible via the Node-red webserver ( indeed via the httpstatic setting). As a result the browser can access files in that directory, but it still won't know what c://... means. There are plenty of good examples available on Discourse, when you search for "dashboard local image".

2 Likes

Hi Jude,

Steps

  1. There is a settings.js file, which contains the path of your static dashboard contents.
    It is usually located in C:\Users\{{userName}}\.node-red where {{userName}} is your user name.
    Open this file end edit the following line, and save the file.
...
    // 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/',
    httpStatic: 'C:\Users\{{userName}}\.node-red\static' 
...

Again, the {{userName}} is your user name.

  1. Now create a folder in C:\Users\{{userName}}\.node-red called static.
  2. Put your picture inside
  3. Restart your node-red
  4. Now you can use the relative path to the image from your static folder, just use a / before it.

Example:

Daniel

6 Likes

Have you tried https://flows.nodered.org/node/node-red-contrib-ui-media? It supports images and videos, and you can upload the image directly from the Node-RED interface

2 Likes

thank you for your replies. it worked! :slight_smile:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.