# Display image using \</\>template node

**URL:** <https://discourse.nodered.org/t/display-image-using-template-node/43094>\
**Category:** General\
**Created:** [23 March 2021 20:52 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094 "2021-03-23T20:52:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [23 March 2021 20:52 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/1 "2021-03-23T20:52:37Z")

</div>

Hi Everyone,

Could someone please tell me what I'm doing wrong.  
Trying to display an image using the \</\>template node.  
I'm sure what I've done in the template node is incorrect.

Cheers.  
Paul.

```auto
[{"id":"3a1bff0b.55d3c","type":"ui_template","z":"b63efc3f.9a86a","group":"a73c0688.26bac8","name":"","order":9,"width":"8","height":"4","format":"\n \n <img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"msg.payload\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":660,"wires":[[]]},{"id":"bc137f20.f932b","type":"function","z":"b63efc3f.9a86a","name":"msg.filename","func":"msg.filename = \"/home/pi/.node-red/lp-screenshots/SS-2021-02-23-120115.png\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":660,"wires":[["4757d887.183fc8"]]},{"id":"ee87f65b.9f4398","type":"inject","z":"b63efc3f.9a86a","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":140,"y":660,"wires":[["bc137f20.f932b"]]},{"id":"4757d887.183fc8","type":"file in","z":"b63efc3f.9a86a","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":480,"y":660,"wires":[["3a1bff0b.55d3c"]]},{"id":"a73c0688.26bac8","type":"ui_group","name":"Bits","tab":"207e613d.22c52e","order":4,"disp":false,"width":"25","collapse":false},{"id":"207e613d.22c52e","type":"ui_tab","name":"Configuration","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 March 2021 21:00 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/2 "2021-03-23T21:00:15Z")

</div>

Hi Paul. Have a read of the built in help for the ui-template node. You need to surround variables with {{curly brackets}}. You have essentially set the image src to a URL of /msg.payload (instead of is value)

---

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [23 March 2021 21:05 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/3 "2021-03-23T21:05:08Z")

</div>

Hi Steve,  
Thanks for replying.  
I have done as you have suggested but still getting "Image not found".  
The image exists and the location is correct.  
I've added the base64 node.  
This is the updated flow.

Cheers.  
Paul.

```auto
[{"id":"3a1bff0b.55d3c","type":"ui_template","z":"b63efc3f.9a86a","group":"a73c0688.26bac8","name":"","order":9,"width":"8","height":"4","format":"\n \n <img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"{{msg.payload}}\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":820,"y":660,"wires":[[]]},{"id":"bc137f20.f932b","type":"function","z":"b63efc3f.9a86a","name":"msg.filename","func":"msg.filename = \"/home/pi/.node-red/lp-screenshots/SS-2021-02-23-120115.png\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":660,"wires":[["4757d887.183fc8"]]},{"id":"ee87f65b.9f4398","type":"inject","z":"b63efc3f.9a86a","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":140,"y":660,"wires":[["bc137f20.f932b"]]},{"id":"4757d887.183fc8","type":"file in","z":"b63efc3f.9a86a","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":480,"y":660,"wires":[["6b7c6c46.843564"]]},{"id":"6b7c6c46.843564","type":"base64","z":"b63efc3f.9a86a","name":"","action":"str","property":"payload","x":640,"y":660,"wires":[["3a1bff0b.55d3c"]]},{"id":"a73c0688.26bac8","type":"ui_group","name":"Bits","tab":"207e613d.22c52e","order":4,"disp":false,"width":"25","collapse":false},{"id":"207e613d.22c52e","type":"ui_tab","name":"Configuration","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 March 2021 21:10 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/4 "2021-03-23T21:10:44Z")

</div>

Sorry, I didnt import your flow (I didnt realise you were loading the file and converting to base64)

Try this instead...

`<img width="100%" height="100%" alt="Image not found" src="data:image/png;base64,{{{payload}}}">`

---

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [23 March 2021 21:17 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/5 "2021-03-23T21:17:38Z")

</div>

Still not working. 🤯

This is the flow.

```auto
[{"id":"3a1bff0b.55d3c","type":"ui_template","z":"b63efc3f.9a86a","group":"a73c0688.26bac8","name":"","order":9,"width":"8","height":"4","format":"\n\n <img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{{payload}}}\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":860,"y":660,"wires":[[]]},{"id":"bc137f20.f932b","type":"function","z":"b63efc3f.9a86a","name":"msg.filename","func":"msg.filename = \"/home/pi/.node-red/lp-screenshots/SS-2021-02-23-120115.png\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":660,"wires":[["4757d887.183fc8"]]},{"id":"ee87f65b.9f4398","type":"inject","z":"b63efc3f.9a86a","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":140,"y":660,"wires":[["bc137f20.f932b"]]},{"id":"4757d887.183fc8","type":"file in","z":"b63efc3f.9a86a","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":480,"y":660,"wires":[["6b7c6c46.843564"]]},{"id":"6b7c6c46.843564","type":"base64","z":"b63efc3f.9a86a","name":"","action":"","property":"payload","x":640,"y":660,"wires":[["3a1bff0b.55d3c"]]},{"id":"a73c0688.26bac8","type":"ui_group","name":"Bits","tab":"207e613d.22c52e","order":4,"disp":false,"width":"25","collapse":false},{"id":"207e613d.22c52e","type":"ui_tab","name":"Configuration","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 March 2021 21:19 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/6 "2021-03-23T21:19:54Z")

</div>

My brain aint working.

does this work?

```auto
[{"id":"4320ade9.579af4","type":"function","z":"df3cdacd.dc9198","name":"msg.filename","func":"msg.filename = \"/home/pi/.node-red/lp-screenshots/SS-2021-02-23-120115.png\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1730,"y":1060,"wires":[["42afb7ca.cdefc8"]]},{"id":"e487060e.8a5ca8","type":"inject","z":"df3cdacd.dc9198","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":1560,"y":1060,"wires":[["4320ade9.579af4"]]},{"id":"42afb7ca.cdefc8","type":"file in","z":"df3cdacd.dc9198","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":1900,"y":1060,"wires":[["a1509a0f.4fa0f8"]]},{"id":"a1509a0f.4fa0f8","type":"base64","z":"df3cdacd.dc9198","name":"","action":"","property":"payload","x":2060,"y":1060,"wires":[["ade3fc9c.8b5d1"]]},{"id":"ade3fc9c.8b5d1","type":"template","z":"df3cdacd.dc9198","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":" <img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{{payload}}}\">","output":"str","x":2220,"y":1060,"wires":[["95ec3f33.28d36"]]},{"id":"95ec3f33.28d36","type":"ui_template","z":"df3cdacd.dc9198","group":"a73c0688.26bac8","name":"","order":9,"width":"8","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":2380,"y":1060,"wires":[[]]},{"id":"a73c0688.26bac8","type":"ui_group","name":"Bits","tab":"207e613d.22c52e","order":4,"disp":false,"width":"25","collapse":false},{"id":"207e613d.22c52e","type":"ui_tab","name":"Configuration","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![FatPilot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatpilot/32/38329_2.png) [@FatPilot](https://discourse.nodered.org/u/FatPilot)\
**Post date:** [23 March 2021 21:24 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/7 "2021-03-23T21:24:59Z")

</div>

Hi Steve,

Played around a bit more.

This works and I can go from here. Thanks for your time. 🤩

```auto
[{"id":"76f9c28c.8d324c","type":"inject","z":"b63efc3f.9a86a","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":740,"wires":[["91ff3a3e.591a38"]]},{"id":"696f92ca.600a9c","type":"ui_template","z":"b63efc3f.9a86a","group":"a73c0688.26bac8","name":"","order":1,"width":"10","height":"5","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":false,"templateScope":"local","x":990,"y":740,"wires":[[]]},{"id":"e66563f4.00136","type":"base64","z":"b63efc3f.9a86a","name":"","action":"str","property":"payload","x":810,"y":740,"wires":[["696f92ca.600a9c"]]},{"id":"91ff3a3e.591a38","type":"file in","z":"b63efc3f.9a86a","name":"","filename":"/home/pi/.node-red/lp-screenshots/SS-2021-02-23-120115.png","format":"","chunk":false,"sendError":false,"encoding":"none","x":460,"y":740,"wires":[["e66563f4.00136"]]},{"id":"a73c0688.26bac8","type":"ui_group","name":"Bits","tab":"207e613d.22c52e","order":4,"disp":false,"width":"25","collapse":false},{"id":"207e613d.22c52e","type":"ui_tab","name":"Configuration","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 April 2021 21:24 UTC](https://discourse.nodered.org/t/display-image-using-template-node/43094/8 "2021-04-06T21:24:59Z")

</div>

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