Put snapshot on dashboard

General
1

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
image_2025-10-09_1903200561109×582 99 KB

[
    {
        "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
image_2025-10-09_190434773555×458 7.98 KB

2

If only it was that easy :grinning:
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.

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