\
**Category:** Developing Nodes\
**Created:** [7 September 2019 03:06 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221 "2019-09-07T03:06:08Z")\
**Posts on this page:** 13\
**Page:** 1
**Author:**  [@Ekristoffe](https://discourse.nodered.org/u/Ekristoffe)\
**Post date:** [7 September 2019 03:06 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/1 "2019-09-07T03:06:08Z")
Hello all,
I am making a node and I am following the doc : [https://nodered.org/docs/creating-nodes/](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
---
**Author:**  [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [7 September 2019 06:25 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/2 "2019-09-07T06:25:39Z")
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.
---
**Author:**  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 September 2019 08:02 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/3 "2019-09-07T08:02:02Z")
> [@knolleary](#):
>
> Go full ASCII
Morning Nick (@knolleary), do you mean a data-url containing a base64 encoded string or something else?
Bart
---
**Author:**  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 September 2019 08:11 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/4 "2019-09-07T08:11:25Z")
> [@BartButenaers](#):
>
> do you mean a data-url containing a base64 encoded string or something else?
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.
---
**Author:**  [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [7 September 2019 08:14 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/5 "2019-09-07T08:14:56Z")
Which ever you want.
Can't beat a bit of proper ASCII art however.
```auto
_____
.'/L|__`.
/ =[_]O|` \
|"+ _____":|
__:='|____ `-:__
||[] ||====| []||
||[] | |=| | []||
|:||_|=|U| |_||:|
|:|||]_=_ =[_||:| LS
| |||] [_][]C|| |
| ||-'"""""`-|| |
/|\\_\_|_|_/_//|\
| ___| /|\ |___ |
`---' |___| `---'
`---'
```
---
**Author:**  [@Ekristoffe](https://discourse.nodered.org/u/Ekristoffe)\
**Post date:** [8 September 2019 01:55 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/6 "2019-09-08T01:55:01Z")
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.
---
**Author:**  [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [8 September 2019 06:51 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/7 "2019-09-08T06:51:18Z")
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 π
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.
---
**Author:**  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 September 2019 07:12 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/8 "2019-09-08T07:12:15Z")
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** _:
3. I have not used this for images yet, but I think you can _ **show** _ this in your html file (help section):
Just for completeness, about my other option (_ **base64** _). You can convert your image also to a base64 string (e.g. via [this](https://www.base64-image.de/) online converter I assume) and just paste the base64 string into your html file:
```auto
```
But like the others already said, I would also go for an endpoint ...
---
**Author:**  [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 September 2019 07:16 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/9 "2019-09-08T07:16:37Z")
@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 π
There is one small, but important change needed to what you've suggested. The URL for the image must not start with a `/`:
```auto
```
This ensures the path is correct even if the user has move the base path of the editor away from `/`.
---
**Author:**  [@Ekristoffe](https://discourse.nodered.org/u/Ekristoffe)\
**Post date:** [8 September 2019 08:04 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/10 "2019-09-08T08:04:37Z")
@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.
---
**Author:**  [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 September 2019 08:08 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/11 "2019-09-08T08:08:11Z")
Well they do say "a picture is worth a thousand words", whether it is worth 6000 or so is up to you π
---
**Author:**  [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 September 2019 08:17 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/12 "2019-09-08T08:17:04Z")
> [@Ekristoffe](#):
>
> @knolleary thanks but the idea doesn't work since the server don't ave access to the different folder.
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.
---
**Author:**  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 September 2019 12:18 UTC](https://discourse.nodered.org/t/add-image-in-node-help-html-file/15221/13 "2019-09-08T12:18:58Z")
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.
>