Add image in Node help html file

Developing Nodes
1

Hello all,
I am making a node and I am following the doc : https://nodered.org/docs/creating-nodes/
Or i can't find a way to add image in the html file for the help section (data-help-name)
I want to be able to have the image without an internet access to using an external server is impossible.
I have try < img id="img" src="image"/ >< br/ >
with image replaced with
"/data/node_modules/< node name >/< folder >/image.png"
"/node_modules/< node name >/< folder >/image.png"
"/< node name >/< folder >/image.png"
"/< folder >/image.png"
"/image.png"
I have also try without the first "/"
Anyone have an idea if this is possible ?
(If not I may need to convert the image into ascii art)
Thanks

2

There's no built-in support for serving images to the sidebar.

Your options are:

  1. Create an admin http endpoint that serves the image. The node-red-node-geofence module does something similar to serve custom JavaScript resources to the editor.

  2. Use inline svg for your images directly in the html.

  3. Go full ASCII.

3

Morning Nick (@knolleary), do you mean a data-url containing a base64 encoded string or something else?
Bart

4

That would certainly work.

Creating an API end-point against the admin version of the ExpressJS app also works, I have several of those in uibuilder v2.

1 Like
5

Which ever you want.

Can't beat a bit of proper ASCII art however.

         _____
       .'/L|__`.
      / =[_]O|` \
      |"+_____":|
    __:='|____`-:__
   ||[] ||====| []||
   ||[] | |=| | []||
   |:||_|=|U| |_||:|
   |:|||]_=_ =[_||:| LS
   | |||] [_][]C|| |
   | ||-'"""""`-|| |
   /|\\_\_|_|_/_//|\
  |___|   /|\   |___|  
  `---'  |___|  `---'     
         `---'
6 Likes
6

Thanks guys.
The svg is too complicated (if we want to have the same image with colors and all).
The ascii art was more a joke but still usefull.
I think I will stay with only text and ask for an improvement.

7

API endpoint defining on Express with static resources from your node and referring to that address in the URL in the HTML like @TotallyInformation suggested is a solid option too. Something to keep in mind :slight_smile:
It’s my default choice as well, but I can’t show any of my custom nodes yet as reference as none of them is finished yet, nor published publicly.

1 Like
8

Chris,

In your case I would also create a simple endpoint:

  1. Create in your node's Github repository e.g. a directory 'images' and store your image into that directory.

  2. Add the following code snippet at the end of your js file to create an endpoint:

    // Make your image public available
 RED.httpAdmin.get('/your_unique_name/*', function(req, res){
     var options = {
         root: __dirname /*+ '/images/'*/,
         dotfiles: 'deny'
     };
    
     // Send the requested file to the client 
     res.sendFile(req.params[0], options)
 });

    P.S. "your_unique_name" is a random name that you choose, most logically referring someway to your node's name.

  3. I have not used this for images yet, but I think you can show this in your html file (help section):

    <img alt="" src="/your_unique_name/images/your_image_file_name">

Just for completeness, about my other option (base64). You can convert your image also to a base64 string (e.g. via this online converter I assume) and just paste the base64 string into your html file:

<img alt="" src="data:image/jpeg+xml;base64,your_base_64_string">

But like the others already said, I would also go for an endpoint ...

2 Likes
9

@BartButenaers yup, that is what I was alluding to when I mentioned the geofence node. Just couldn't type out a full example from my phone :wink:

There is one small, but important change needed to what you've suggested. The URL for the image must not start with a /:

<img alt="" src="no_slash_your_unique_name/images/your_image_file_name">

This ensures the path is correct even if the user has move the base path of the editor away from /.

2 Likes
10

@knolleary thanks but the idea doesn't work since the server don't ave access to the different folder.
@bartbutenaers the solution which worked the best is the base64.

So yes we can use the converter you give and embedded the image inside the help, but the HTML file goes from 2kb to 49k.

Thanks a lot.

I hope this post will help others.

11

Well they do say "a picture is worth a thousand words", whether it is worth 6000 or so is up to you :slight_smile:

2 Likes
12

Can you explain that bit more? I assume the image is included in your module, along side your node's .js file. That means you can create the admin http endpoint in your js file to serve up the image just as Bart suggested.

2 Likes
13

Check out the code for uibuilder which includes a number of admin api's

You may wish to add permissions as well as shown above.

This example shows how to request an individual file:

But it is probably easiest just to add a static folder that points to a folder in your package. The following example uses a reference to app which is the end user Express app, you can also restrict it to the admin Express app if you want.