Display image using </>template node

[FatPilot]

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.

[{"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}]

[Steve-Mcl]

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)

[FatPilot]

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.

[{"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}]

[Steve-Mcl]

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}}}">

[FatPilot]

Still not working.

This is the flow.

[{"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}]

[Steve-Mcl]

My brain aint working.

does this work?

[{"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}]

[FatPilot]

Hi Steve,

Played around a bit more.

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

[{"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}]