# Put snapshot on dashboard

**URL:** <https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337>\
**Category:** Dashboard\
**Created:** [9 October 2025 18:02 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337 "2025-10-09T18:02:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![montyfert](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@montyfert](https://discourse.nodered.org/u/montyfert)\
**Post date:** [9 October 2025 18:02 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/1 "2025-10-09T18:02:30Z")

</div>

hi I'm trying to put a snapshot from my 3d printer cam on my dashboard,  
i am able to get a picture to a image preview node , but when i send it to a ui template node the only thing that appears on the dashboard is the address

 ![image_2025-10-09_190320056](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d56bc946440efa9eef178be55c87216c5615f53.png)

```auto
[
    {
        "id": "d4a09425498d2426",
        "type": "inject",
        "z": "5a48f4f272ae5046",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "http://192.168.0.107:8001/?action=snapshot",
        "payloadType": "str",
        "x": 130,
        "y": 100,
        "wires": [
            [
                "26eaef4d01b44d90",
                "3af15ac76ab8b2ce"
            ]
        ]
    },
    {
        "id": "26eaef4d01b44d90",
        "type": "image",
        "z": "5a48f4f272ae5046",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": true,
        "outputs": 1,
        "x": 500,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "3af15ac76ab8b2ce",
        "type": "ui_template",
        "z": "5a48f4f272ae5046",
        "group": "81060d8e4e1f2004",
        "name": "",
        "order": 0,
        "width": "6",
        "height": "6",
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 290,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "81060d8e4e1f2004",
        "type": "ui_group",
        "name": "bambu",
        "tab": "cb9ffd151a8ff47e",
        "order": 7,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "cb9ffd151a8ff47e",
        "type": "ui_tab",
        "name": "3d printer",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

```

`

 ![image_2025-10-09_190434773](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4baf1f85733e2ef634f3224da3ff1b5ba8a58ab1.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 October 2025 22:56 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/2 "2025-10-09T22:56:06Z")

</div>

> [@montyfert](#):
>
> `"format": "<div ng-bind-html=\"msg.payload\"></div>",`

If only it was that easy 😀  
Unfortunately your code is telling the browser to just display the payload text, as you found out.

You can try this small flow, it is for dashboard 1 (OG dashboard) as I don't use the new one.  
Just set the ui-template to your dashboard group, and adjust size to suit.

```auto
[{"id":"inject-node","type":"inject","z":"2a22289221c91045","name":"Trigger Refresh","props":[{"p":"payload"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":860,"y":590,"wires":[["http-request-node"]]},{"id":"http-request-node","type":"http request","z":"2a22289221c91045","name":"Fetch Snapshot","method":"GET","ret":"bin","paytoqs":"ignore","url":"http://192.168.0.107:8001/?action=snapshot","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":1060,"y":590,"wires":[["function-node"]]},{"id":"function-node","type":"function","z":"2a22289221c91045","name":"Convert to Base64","func":"if (msg.statusCode && msg.statusCode !== 200) {\n node.error('HTTP Request failed with status: ' + msg.statusCode);\n msg.payload = null;\n} else if (msg.payload) {\n msg.payload = 'data:image/jpeg;base64,' + Buffer.from(msg.payload).toString('base64');\n} else {\n msg.payload = null;\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1260,"y":590,"wires":[["ui-template-node"]]},{"id":"ui-template-node","type":"ui_template","z":"2a22289221c91045","group":"74bd0363.c7a924","name":"Display Snapshot","order":1,"width":"10","height":"8","format":"<div>\n <img ng-src=\"{{msg.payload}}\" alt=\"Snapshot\" style=\"max-width: 100%; height: auto;\" ng-if=\"msg.payload\">\n <p ng-if=\"!msg.payload\">No image available</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1460,"y":590,"wires":[[]]},{"id":"74bd0363.c7a924","type":"ui_group","name":"newsfeed","tab":"dc50fb1.77df988","order":2,"disp":false,"width":"10","collapse":false,"className":"click_newsfeed"},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false},{"id":"eb25c74e588dec7a","type":"global-config","env":[],"modules":{"node-red-dashboard":"3.6.6"}}]

```

---

<div class="post-metadata">

**Author:** ![montyfert](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@montyfert](https://discourse.nodered.org/u/montyfert)\
**Post date:** [10 October 2025 12:44 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/3 "2025-10-10T12:44:38Z")

</div>

your an absolute star thank you  
martin

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [10 October 2025 16:17 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/4 "2025-10-10T16:17:34Z")

</div>

> [@montyfert](#):
>
> Your an absolute star thank you

Thats a bit strong - I mean he's good, but star?

Sorry @Sean-McG, I'm still hurt by the COMMS room discussion 😜

(and sorry for the spam - its been a while 😅 )

* * *

I moved this to the dashboard category

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [10 October 2025 16:55 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/5 "2025-10-10T16:55:48Z")

</div>

> [@marcus-j-davies](#):
>
> I'm still hurt by the COMMS room discussion

I'll let you off the comms room if you finish the virgin tv node !  
( montyfert -also sorry for the spam !)

---

<div class="post-metadata">

**Author:** ![montyfert](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@montyfert](https://discourse.nodered.org/u/montyfert)\
**Post date:** [16 October 2025 22:19 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/6 "2025-10-16T22:19:58Z")

</div>

hi i have another stream but it does not seem to want to work like the last one , just wondering if you could take a look at it 😀  
[http://192.168.0.33:1984/api/frame.mp4?src=cam3](http://192.168.0.33:1984/api/frame.mp4?src=cam3)  
thanks  
martin

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [16 October 2025 22:49 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/7 "2025-10-16T22:49:21Z")

</div>

I assume this is from a different source / camera type ?

What happens if you try that in your browser, does it give a jpg image ?

---

<div class="post-metadata">

**Author:** ![montyfert](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@montyfert](https://discourse.nodered.org/u/montyfert)\
**Post date:** [16 October 2025 23:52 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/8 "2025-10-16T23:52:02Z")

</div>

yes its wansview camera ,i did try installing the onvif node but it would not install so am using go2rtc to convert it  
and yes it does give an image.  
thanks

---

<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:** [30 October 2025 23:52 UTC](https://discourse.nodered.org/t/put-snapshot-on-dashboard/99337/9 "2025-10-30T23:52:43Z")

</div>

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