Can't display image on Dashboard?

Using the Hikvision Ultimate node to capture a picture from CCTV camera but won't display on dashboard? Using the flow below, send image by email(node removed) and preview in editor both work fine just not in Dashboard? Only image container shown in dashboard -no errors in NR debug?

[{"id":"234ae4a8.93e7fc","type":"image","z":"50cda459.88ef7c","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":540,"y":2620,"wires":[]},{"id":"75aa53d7.85482c","type":"change","z":"50cda459.88ef7c","name":"Setup msg","rules":[{"t":"set","p":"cid","pt":"msg","to":"","tot":"date"},{"t":"set","p":"attachments","pt":"msg","to":"[{\t \"filename\": 'image_' & $replace($now(),\":\",\"_\") & '.jpg', \t \"content\": $$.forEmail,\t \"cid\": \"\" & cid & \"\"\t}]","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"See attached image","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"''","tot":"jsonata"},{"t":"set","p":"from","pt":"msg","to":"info@mysupersmarthome.it","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":2520,"wires":[["b02d4ab6.8bf9a8"]]},{"id":"5aae5b3e.f79304","type":"hikvisionUltimatePicture","z":"50cda459.88ef7c","name":"Grab Picture","topic":"","server":"4e1a46.3c7255bc","channelID":"1","rotateimage":"0","heightimage":"100","widthimage":"180","qualityimage":"100","cropimage":"","textoverlay":"","textoverlayXY":"","textoverlayWH":"","textoverlayFont":"FONT_SANS_64_WHITE","urlImageCurrentIndex":"0","x":330,"y":2560,"wires":[["75aa53d7.85482c","234ae4a8.93e7fc","3838f250.f8ea5e","ddbe0400.ce1d28"],[]]},{"id":"3da1ebaf.077cf4","type":"inject","z":"50cda459.88ef7c","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":2560,"wires":[["5aae5b3e.f79304"]]},{"id":"3838f250.f8ea5e","type":"template","z":"50cda459.88ef7c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"180px\" height=\"100px\" src=\"data:image/jpg;base64,/9j/{{payload}}\">","output":"str","x":520,"y":2560,"wires":[["c3b728b1.3afb78"]]},{"id":"ddbe0400.ce1d28","type":"debug","z":"50cda459.88ef7c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":2480,"wires":[]},{"id":"c3b728b1.3afb78","type":"ui_template","z":"50cda459.88ef7c","group":"23405186.08848e","name":"","order":4,"width":"0","height":"0","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":2560,"wires":[[]]},{"id":"4e1a46.3c7255bc","type":"Hikvision-config","host":"192.168.1.200","port":"80","name":"Main Gate","authentication":"digest","protocol":"http","heartbeattimerdisconnectionlimit":"1","deviceinfo":"{\"DeviceInfo\":{\"$\":{\"version\":\"2.0\",\"xmlns\":\"http://www.hikvision.com/ver20/XMLSchema\"},\"deviceName\":\"Main Gate\",\"deviceID\":\"b7460000-d0b6-11b5-84b5-ecc89c5ca1b7\",\"deviceDescription\":\"IPCamera\",\"deviceLocation\":\"hangzhou\",\"systemContact\":\"Hikvision.China\",\"model\":\"DS-2CD2T87G2-L\",\"serialNumber\":\"DS-2CD2T87G2-L20201205AAWRF22085584\",\"macAddress\":\"ec:c8:9c:5c:a1:b7\",\"firmwareVersion\":\"V5.5.154\",\"firmwareReleasedDate\":\"build 200928\",\"encoderVersion\":\"V7.3\",\"encoderReleasedDate\":\"build 200925\",\"bootVersion\":\"V1.3.4\",\"bootReleasedDate\":\"100316\",\"hardwareVersion\":\"0x0\",\"deviceType\":\"IPCamera\",\"telecontrolID\":\"88\",\"supportBeep\":\"false\",\"supportVideoLoss\":\"false\",\"firmwareVersionInfo\":\"B-R-G3-0\"}}"},{"id":"23405186.08848e","type":"ui_group","name":"Charts","tab":"78d863c9.1da73c","order":9,"disp":true,"width":"6","collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

Have you tried triple {{{ }}} around the payload?

Yes, actually that's what I had initially :frowning:

data:image/jpg;base64,/9j/{{payload}}

whats the /9j/ after the comma?

also try outputting msg.template and removing div in ui-template.
e.g.

[{"id":"c3b728b1.3afb78","type":"ui_template","z":"b779de97.b1b46","group":"23405186.08848e","name":"","order":4,"width":"0","height":"0","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":2500,"wires":[[]]},{"id":"3838f250.f8ea5e","type":"template","z":"b779de97.b1b46","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"180px\" height=\"100px\" src=\"data:image/jpg;base64,/9j/{{payload}}\">","output":"str","x":520,"y":2500,"wires":[["c3b728b1.3afb78"]]},{"id":"23405186.08848e","type":"ui_group","name":"Charts","tab":"78d863c9.1da73c","order":9,"disp":true,"width":"6","collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

I added /9j/ because its included in the object out from the HVU node(see below), originally I tried without it, so even with you recommended changes it makes no diff with or without /9j/ I have seen this on stack overflow also but no idea what it means.

I tried removing the DIV and converting the mustache template output from .payload to .template if that's what you meant? but still no luck :frowning: Thanks for your help

object out

Like this example

[{"id":"c359c787.720eb","type":"template","z":"b779de97.b1b46","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"180px\" height=\"100px\" src=\"data:image/gif;base64,{{{payload}}}\">","output":"str","x":370,"y":2260,"wires":[["c3b728b1.3afb78","ddbe0400.ce1d28"]]},{"id":"3da1ebaf.077cf4","type":"inject","z":"b779de97.b1b46","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"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","payloadType":"str","x":170,"y":2240,"wires":[["c359c787.720eb"]]},{"id":"c3b728b1.3afb78","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":4,"width":"0","height":"0","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":2220,"wires":[[]]},{"id":"ddbe0400.ce1d28","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":410,"y":2140,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

I've injected a base64 gif( (edited image data url to be image/gif), outputted the template to msg.template and removed all info from ui-template. I also used triple {{{ }}}.

So, what I did:

  1. Copied your flow into my canvas, set the UI group and still nothing. Then I configured my flow as per your flow verbatim, still in both cases no image displayed - no errors. Then searching for something I came across Steve Copes article on the subject where he notes the following shortened code can/could be used in the UI template node '
    {{msg.payload}}
    ' BANG the redbus is revealed. So copy this to my node then wine and TV -but alas no difference no wine no TV -no image from my flow! LOST
[{"id":"4b631154.e5e8e","type":"template","z":"50cda459.88ef7c","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"180px\" height=\"100px\" src=\"data:image/gif;base64,{{{payload}}}\">","output":"str","x":580,"y":3120,"wires":[["b64d3719.7c4d78","119b58e.c6148a7"]]},{"id":"71b77668.2976a8","type":"inject","z":"50cda459.88ef7c","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==","payloadType":"str","x":380,"y":3120,"wires":[["4b631154.e5e8e"]]},{"id":"b64d3719.7c4d78","type":"ui_template","z":"50cda459.88ef7c","group":"23405186.08848e","name":"","order":4,"width":"0","height":"0","format":"<div>{{msg.payload}}</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":800,"y":3120,"wires":[[]]},{"id":"119b58e.c6148a7","type":"debug","z":"50cda459.88ef7c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":790,"y":3060,"wires":[]},{"id":"23405186.08848e","type":"ui_group","name":"Charts","tab":"78d863c9.1da73c","order":9,"disp":true,"width":"6","collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

You may need a base64 node in between the source and your template

This is how my flow looks, still no image must be something we are missing about the HVU node, reading the docs it outputs a regular base64 image?

[{"id":"5aae5b3e.f79304","type":"hikvisionUltimatePicture","z":"50cda459.88ef7c","name":"Grab Picture","topic":"","server":"4e1a46.3c7255bc","channelID":"1","rotateimage":"0","heightimage":"100","widthimage":"180","qualityimage":"100","cropimage":"","textoverlay":"","textoverlayXY":"","textoverlayWH":"","textoverlayFont":"FONT_SANS_64_WHITE","urlImageCurrentIndex":"0","x":330,"y":2560,"wires":[["3838f250.f8ea5e","ddbe0400.ce1d28"],[]]},{"id":"3da1ebaf.077cf4","type":"inject","z":"50cda459.88ef7c","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":2560,"wires":[["5aae5b3e.f79304"]]},{"id":"c3b728b1.3afb78","type":"ui_template","z":"50cda459.88ef7c","group":"23405186.08848e","name":"","order":5,"width":"0","height":"0","format":"<div>{{msg.payload}}</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":2560,"wires":[[]]},{"id":"3838f250.f8ea5e","type":"template","z":"50cda459.88ef7c","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"180px\" height=\"100px\" src=\"data:image/jpg;base64,{{{payload}}}\">","output":"str","x":520,"y":2560,"wires":[["c3b728b1.3afb78"]]},{"id":"ddbe0400.ce1d28","type":"debug","z":"50cda459.88ef7c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":2520,"wires":[]},{"id":"4e1a46.3c7255bc","type":"Hikvision-config","host":"192.168.1.200","port":"80","name":"Main Gate","authentication":"digest","protocol":"http","heartbeattimerdisconnectionlimit":"1","deviceinfo":"{\"DeviceInfo\":{\"$\":{\"version\":\"2.0\",\"xmlns\":\"http://www.hikvision.com/ver20/XMLSchema\"},\"deviceName\":\"Main Gate\",\"deviceID\":\"b7460000-d0b6-11b5-84b5-ecc89c5ca1b7\",\"deviceDescription\":\"IPCamera\",\"deviceLocation\":\"hangzhou\",\"systemContact\":\"Hikvision.China\",\"model\":\"DS-2CD2T87G2-L\",\"serialNumber\":\"DS-2CD2T87G2-L20201205AAWRF22085584\",\"macAddress\":\"ec:c8:9c:5c:a1:b7\",\"firmwareVersion\":\"V5.5.154\",\"firmwareReleasedDate\":\"build 200928\",\"encoderVersion\":\"V7.3\",\"encoderReleasedDate\":\"build 200925\",\"bootVersion\":\"V1.3.4\",\"bootReleasedDate\":\"100316\",\"hardwareVersion\":\"0x0\",\"deviceType\":\"IPCamera\",\"telecontrolID\":\"88\",\"supportBeep\":\"false\",\"supportVideoLoss\":\"false\",\"firmwareVersionInfo\":\"B-R-G3-0\"}}"},{"id":"23405186.08848e","type":"ui_group","name":"Charts","tab":"78d863c9.1da73c","order":9,"disp":true,"width":"6","collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

Which you then need to encode/decode/process with the base64 node, for the template. In my tests, the editor image viewer node works without it, but the template doesn't

Ah ok, I just had a go with the base64 node placing it before the first template and before the second template using the 3 options in the base64 node -no difference. The other thing is if you look at the instructions on npm for this node both the visual setup and the code for download do not include a base 64 node?

Thanks for your help :smile:

Turns out you didn't need your pre-template adjustment node.

This works with my HikVision Camera. I used one of my usual templates as I like the border... adjust as needed.

[{"id":"234ae4a8.93e7fc","type":"image","z":"f4c74d5cad6efb7b","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":800,"y":500,"wires":[]},{"id":"75aa53d7.85482c","type":"change","z":"f4c74d5cad6efb7b","name":"Setup msg","rules":[{"t":"set","p":"cid","pt":"msg","to":"","tot":"date"},{"t":"set","p":"attachments","pt":"msg","to":"[{\t \"filename\": 'image_' & $replace($now(),\":\",\"_\") & '.jpg', \t \"content\": $$.forEmail,\t \"cid\": \"\" & cid & \"\"\t}]","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"See attached image","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"''","tot":"jsonata"},{"t":"set","p":"from","pt":"msg","to":"info@mysupersmarthome.it","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":790,"y":400,"wires":[[]]},{"id":"3da1ebaf.077cf4","type":"inject","z":"f4c74d5cad6efb7b","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":410,"y":440,"wires":[["5aae5b3e.f79304"]]},{"id":"ddbe0400.ce1d28","type":"debug","z":"f4c74d5cad6efb7b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":340,"wires":[]},{"id":"5aae5b3e.f79304","type":"hikvisionUltimatePicture","z":"f4c74d5cad6efb7b","name":"Grab Picture","topic":"","server":"","channelID":"1","rotateimage":"0","heightimage":"","widthimage":"","qualityimage":"100","cropimage":"","textoverlay":"","textoverlayXY":"","textoverlayWH":"","textoverlayFont":"FONT_SANS_64_WHITE","urlImageCurrentIndex":"0","x":590,"y":440,"wires":[["75aa53d7.85482c","234ae4a8.93e7fc","ddbe0400.ce1d28","87f02c07ab2729b6"],[]]},{"id":"87f02c07ab2729b6","type":"ui_template","z":"f4c74d5cad6efb7b","group":"23405186.08848e","name":"HiKVision","order":1,"width":10,"height":"6","format":"<!DOCTYPE html>\n<html>\n<style>\n    .img {\n        border: 10px solid #000;\n        border-radius: 8px;\n        padding: 2px;\n        width: 400px;\n    }\n</style>\n\n<center>\n    <table>\n        <tr>\n            <!-- Row 1 -->\n            <td style=\"text-align: center\"><img src=\"{{msg.payload}}\" class=img /></td>\n        </tr>\n    </table>\n</center>\n</html>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":780,"y":440,"wires":[[]]},{"id":"23405186.08848e","type":"ui_group","name":"Charts","tab":"78d863c9.1da73c","order":9,"disp":true,"width":10,"collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

Also, don't set the MAX Width/Height in the node, else it really reduces the image quality. Let the template handle the resizing.

image

image

Hello Gunner, E1cid thanks so much for all your help, I got it working in the end, i'll let you know in detail over the weekend -have a good one yourselves! :slight_smile:

Very sorry for the late reply. In the end I contacted the developer, I tried your code @Gunner but for some reason my NR setup did not like your CSS but I'm sure that's because I have missed something else. So, this is the working code I have which uses two templates, I need to check if I can do it with one -thanks again for all the help.

[{"id":"1ab473af56702995","type":"ui_template","z":"50cda459.88ef7c","group":"3883dcd2.cb3654","name":"","order":7,"width":"6","height":"5","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":2620,"wires":[[]]},{"id":"36238576.a6929a","type":"template","z":"50cda459.88ef7c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"{{{payload}}}\">","output":"str","x":540,"y":2620,"wires":[["1ab473af56702995"]]},{"id":"3883dcd2.cb3654","type":"ui_group","name":"Gate Camera","tab":"78d863c9.1da73c","order":13,"disp":true,"width":"6","collapse":false},{"id":"78d863c9.1da73c","type":"ui_tab","name":"Kingstones Alarm System","icon":"dashboard","disabled":false,"hidden":false}]

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