# Can't display image on Dashboard?

**URL:** <https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545>\
**Category:** General\
**Created:** [2 September 2021 14:52 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545 "2021-09-02T14:52:02Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 14:52 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/1 "2021-09-02T14:52:02Z")

</div>

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?

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

```

 ![HVU_flow snip](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a8cfa21c138d956b7c46b5f48017ff2165d8ac2.jpeg)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 September 2021 15:25 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/2 "2021-09-02T15:25:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 16:06 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/3 "2021-09-02T16:06:19Z")

</div>

Yes, actually that's what I had initially ☹

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 September 2021 16:16 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/4 "2021-09-02T16:16:23Z")

</div>

> 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.

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

```

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 17:36 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/5 "2021-09-02T17:36:59Z")

</div>

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 ☹ Thanks for your help

![object out](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a8ed2c70babb7252add0acdd8e5e75b8dc2a824.jpeg)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [2 September 2021 17:42 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/6 "2021-09-02T17:42:20Z")

</div>

Like this example

```auto
[{"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 {{{ }}}.

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 18:30 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/7 "2021-09-02T18:30:36Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 September 2021 20:34 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/9 "2021-09-02T20:34:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 20:34 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/10 "2021-09-02T20:34:40Z")

</div>

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?

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

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 September 2021 20:38 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/11 "2021-09-02T20:38:29Z")

</div>

> [@smithy](#):
>
> it outputs a regular base64 image?

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

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 21:08 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/12 "2021-09-02T21:08:02Z")

</div>

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?

> **[node-red-contrib-hikvision-ultimate](https://www.npmjs.com/package/node-red-contrib-hikvision-ultimate)**
>
> A native set of nodes for Hikvision Cameras, Alarms, Radars etc.

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [2 September 2021 21:08 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/13 "2021-09-02T21:08:27Z")

</div>

Thanks for your help 😄

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 September 2021 21:11 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/14 "2021-09-02T21:11:08Z")

</div>

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.

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c60969ec6cfe048db798e54fc8cfa38ac1eaed9f.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b8795c7623f81df9fe23fbf43dc32ef13cec4ae.jpeg)

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [3 September 2021 20:32 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/15 "2021-09-03T20:32:23Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![smithy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smithy/32/37804_2.png) [@smithy](https://discourse.nodered.org/u/smithy)\
**Post date:** [21 September 2021 20:52 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/16 "2021-09-21T20:52:20Z")

</div>

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.

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

```

---

<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:** [20 November 2021 20:53 UTC](https://discourse.nodered.org/t/cant-display-image-on-dashboard/50545/17 "2021-11-20T20:53:09Z")

</div>

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