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

General
1

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

2

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
3

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

4

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
5

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:

image
image1524Ă—2000 206 KB

Daniel

8 Likes
7

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
8

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

9

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