# Can you put Pictures in/on \`template\` node?

**URL:** <https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142>\
**Category:** Dashboard\
**Created:** [3 May 2022 20:47 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142 "2022-05-03T20:47:30Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [3 May 2022 20:47 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/1 "2022-05-03T20:47:30Z")

</div>

The `template` node (the gui one).

Can I make it show a picture rather than an icon?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2022 20:52 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/2 "2022-05-03T20:52:05Z")

</div>

Not quite sure of your exact question.

Yes, you can use ui\_template to show an image. Just use an `<img>` tag and put the image somewhere accessible - for example in Node-RED's static web folder (configured in settings.js). Or even encoded as a data url if it isn't too large.

Or do you mean that you want an image to represent the page in your tabs? There are rules for what works and what doesn't but you can easily convert from an image to a .ico image using an online tool.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [3 May 2022 20:56 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/3 "2022-05-03T20:56:30Z")

</div>

My bad. Sorry.

Your first guess is correct.

Rather than showing an _icon_'s image, I want to show a picture in/on it's.... _area_

Good to know. I thought it would be possible, but just wasn't quite sure enough.

Thanks.  
(Working on a new project)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 05:39 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/4 "2022-05-04T05:39:40Z")

</div>

I've looked on how to do this and the examples which supposedly work don't for me.

There is some conflict (for me) about the path and file name.

For the sake of (please) giving me a baseline, could you show me how to do it with an `inject` node and a `template` node to show a file which is in the `httpStatic` directory called `test.jpg`?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [4 May 2022 10:19 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/5 "2022-05-04T10:19:08Z")

</div>

```auto
[{"id":"1dcee7c93ef6b81e","type":"ui_template","z":"44908087.da8e9","group":"93fb734b1b23203e","name":"StaticImageCam2Poort","order":3,"width":0,"height":0,"format":"<body>\n\n<p>\n<a href=\"/grabcam2.jpg\" target=\"_blank\">\n<img border=\"0\" alt=\"CamVoorGrab\" src=\"/grabcam2.jpg\" width=\"1000\" height=\"800\">\n</a>\n</p>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1010,"y":700,"wires":[[]]},{"id":"93fb734b1b23203e","type":"ui_group","name":"Cam 2 Poort Grab","tab":"5afa5e126e0accce","order":1,"disp":true,"width":"19","collapse":false},{"id":"5afa5e126e0accce","type":"ui_tab","name":"Cam 2 Grab","icon":"icofont-camera-alt","order":34,"disabled":false,"hidden":false}]

```

Here's an example.  
This will load the picture from your httpstatic directory.  
The **httpstatic** directory need to be set in the **settings.js**  
For me it's;  
`httpStatic: '/home/pi/node-red-static/',`

```auto

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2022 10:19 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/6 "2022-05-04T10:19:35Z")

</div>

Share what you have and what errors you are seeing.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:21 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/7 "2022-05-04T10:21:58Z")

</div>

No errors as such.

I just get the `"Image not found"` message in the `template` node on the GUI side of things.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:25 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/8 "2022-05-04T10:25:20Z")

</div>

I'm missing something.

```auto
<body>
<p>
<a href="/grabcam2.jpg" target="_blank">
<img border="0" alt="CamVoorGrab" src="/grabcam2.jpg" width="1000" height="800">
</a>
</p>

```

So the file for which it is looking is `grabcam2.jpg`.... Ok, I can change the name.  
But I am wanting to use `.svg` files now.  
(and I want it to be variable)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2022 10:32 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/9 "2022-05-04T10:32:42Z")

</div>

Have you set up your static folder? Also, have you made a change to `httpNodeRoot`?

If the answers are yes then no, I would start by putting a very simplistic `test.html` page into the static folder and try to access it using `http://localhost:1880/test.html`.

If you can access that, then the image link should work. And yes, you can simply change the name to match something in the folder. SVG's will work as well as jpg/png/gif.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:33 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/10 "2022-05-04T10:33:05Z")

</div>

I got that working as you gave me after pointing it to a file.

Thanks, but I think you over estimated my intelligence.  
I don't really get all this structure stuff.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:36 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/11 "2022-05-04T10:36:19Z")

</div>

I hope I have. It worked with what @edje11 gave me.  
But that is `jpg` files.

`httpNodeRoot`. No changes as far as I know.

I'm now wanting to use `.svg` files.

I'm stuck on how to put the code in the `template` node because as it is, it has this:  
`src="data:image/png;base64,{{msg.payload}}"`

So `png`.... of `jpg`.  
Changing that to `svg` didn't work.  
(confused)

Exert from `settings.js`:

```auto
    // 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: '/home/me/.node-red/public/',

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:41 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/12 "2022-05-04T10:41:03Z")

</div>

To put the cards on the table:

Two parts of the flow.  
Top part doesn't work.  
Bottom part does.

```auto
[{"id":"380ae4bb387b5df7","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3060,"y":200,"wires":[["9cbd16dc65cadcb8"]]},{"id":"181fb98b65a2d183","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/wall.jpg","payloadType":"str","x":2770,"y":200,"wires":[["c553bb3272959d44"]]},{"id":"c553bb3272959d44","type":"file in","z":"0918ee609bf69fc7","name":"Enable","filename":"/home/me/.node-red/public/Pictures/ENABLE.svg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2910,"y":200,"wires":[["380ae4bb387b5df7"]]},{"id":"9cbd16dc65cadcb8","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/svg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":200,"wires":[[]]},{"id":"76f9c28c.8d324c","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload","v":"","vt":"date"},{"p":"topic","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":2760,"y":370,"wires":[["91ff3a3e.591a38"]]},{"id":"91ff3a3e.591a38","type":"file in","z":"0918ee609bf69fc7","name":"Test","filename":"/home/me/.node-red/public/test_picture.png","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2900,"y":370,"wires":[["e66563f4.00136"]]},{"id":"e66563f4.00136","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3070,"y":370,"wires":[["19fd76a4842c7568"]]},{"id":"19fd76a4842c7568","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":390,"wires":[[]]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]

```

Given all the files exist.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 11:10 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/13 "2022-05-04T11:10:43Z")

</div>

Ok, @Steve-Mcl has shown me how to get it working in another thread.

I don't want to flood with multiple threads.

Thanks though @TotallyInformation and @edje11.  
Now I have a size problem with how is is shown on the dashboard.

See this thread (only for clarity)

> [@Asking for a favour from someone as I can't get the program to work](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162):
>
> I am running Ubuntu and have "kolourpaint" as my paint program. I'm trying to design a couple of .... icons for the template node. But as hard as I try, I can't get the TEXT to be solid. The program is dithering (?) the text and it is pathetic. I've downloaded the manual and it is not helpful. And, I now realise I can't import one of them to make all 3 on/in the same picture (for now) So there is/are two attachments. I'm wanting words put on the template. The green/back I want the word O…

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2022 16:20 UTC](https://discourse.nodered.org/t/can-you-put-pictures-in-on-template-node/62142/14 "2022-05-04T16:20:27Z")

</div>