Image display issue

Need to show image in dashboard (UI)
Image is coming in base64 format but I think it is not bringing full image data which I can see in other mqtt client like easymqtt.

  1. How to display the image.
  2. is there some way to increase the data limit to receive full message received in mqtt publish message.


HERE Is the data which seems incomplete. see dots in the end. (Can I increase it size to hold longer string (base64)

[
    {
        "id": "57345c509c40faeb",
        "type": "tab",
        "label": "Images",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "57345c509c40faeb",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 120,
        "wires": [
            [
                "1259899ddb72984b"
            ]
        ]
    },
    {
        "id": "1259899ddb72984b",
        "type": "base64",
        "z": "57345c509c40faeb",
        "name": "",
        "action": "",
        "property": "payload",
        "x": 380,
        "y": 120,
        "wires": [
            [
                "0c2af353be529f2e",
                "56536b6c7c353b55"
            ]
        ]
    },
    {
        "id": "56536b6c7c353b55",
        "type": "debug",
        "z": "57345c509c40faeb",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 580,
        "y": 280,
        "wires": []
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "57345c509c40faeb",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 580,
        "y": 200,
        "wires": []
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]

The debug is limited to showing the user 1000 chars (the actual data is still there).

Can you show us what comes out of the MQTT node?

You are right. But some how it is incomplete even from the mqtt node if I attach a debug node and see the outcome.
I am comparing it from the easyMQTT client. There the data is much bigger than here. I tried to copy it to the inject node and saw the image in the image node.It worked. I think if some how I receive whole data then it would show the image as well.

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDAAoHCAkIBgoJCAkLCwoMDxkQDw4ODx8WFxIZJCAmJiQgIyIoLToxKCs2KyIjMkQzNjs9QEFAJzBHTEY/Szo/QD7/2wBDAQsLCw8NDx0QEB0+KSMpPj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj7/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/wAARCADwAUADASEAAhEBAxEB/9oADAMBAAIRAxEAPwB5aMf8uc3/AHxRuTH/AB5XH/fut/qq7o5vbXWwu6P/AJ87j8YxS7k/58p/+/dT9WXcftfIN0f/AD5XA/7Z0u6P/nzn/wC+KPqq7oftvINyf8+c34pS5i/59JP++aX1Zdx+28hcx/8APnL/AN8UZ...

As Steve said above, the debug output is limited in order to avoid flooding the browser. The dots at the end tell you that it has been truncated. If you select Console output in the debug node it will write the whole output to the node red log.

Thanks for the reply
But the issue is I cannot see the image on the live dashboard when it comes here http://127.0.0.1:1880/ui/

I have changed the output to console and it is appearing there (the data coming from esp32 cam)
here is the flow

Your screenshot shows no dashboard nodes. So if that is all you have, then that is why.

1 Like

I am new in node red and trying to learn it asap.
I have managed to see the image against the node now each time mqtt published the image.But some how I cannot see it in the dashboard media node. here are my nodes.Am I using the right node to display the image.

[
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "b40f79848dc7d67a",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "utf8",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 100,
        "wires": [
            [
                "0c2af353be529f2e",
                "ea5714d7c47c6cd0"
            ]
        ]
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 240,
        "y": 280,
        "wires": []
    },
    {
        "id": "ea5714d7c47c6cd0",
        "type": "image viewer",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "active": true,
        "x": 490,
        "y": 240,
        "wires": [
            [
                "5990019537f0e3c7"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]```

This has been done loads of times on the forum.

Here is one such answer that you should be able to adapt.

Thanks for the reference.
I tried with that but some how it is not showing the image on the dashboard. On the dashboard view it shows the string data. as below
image


Note* I tried to connect with the base64 node but it doesn't show the image in the editor on the viewer node.But if I connect it to MQTT node then it shows the preview in the editor.
I think there is some mistake in the template node of dashboard where it is showing the data string instead of the image.

Here is the image of my nodes copied from the referenced post.

[
    {
        "id": "af2f11a1d93401ad",
        "type": "mqtt in",
        "z": "e96802a60ca41535",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "auto-detect",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 240,
        "wires": [
            [
                "ed24352e.c554d8",
                "a058a57114ad7b2a",
                "2dbac17c.9187ee",
                "2e9a58b72dd0e7d9"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    }
]

You only exported the mqtt node.

How did you format the payload in the template node ?

{{payload}}

or

{{{payload}}}

?

By default, mustache will escape any non-alphanumeric or HTML entities in the values it substitutes. To prevent this, use {{{triple}}} braces.

Finally I got the image.
the problem was in the template node.
Thanks a lot for the help
here is the final working solution
for the template code

<img src = {{{payload}}} alt "jacket" width= "350" height="350" >

[
    {
        "id": "65ed65d31be7f575",
        "type": "mqtt in",
        "z": "b40f79848dc7d67a",
        "name": "",
        "topic": "esp32cam/send",
        "qos": "1",
        "datatype": "utf8",
        "broker": "7d3c912cda946002",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 120,
        "wires": [
            [
                "0c2af353be529f2e",
                "ea5714d7c47c6cd0"
            ]
        ]
    },
    {
        "id": "0c2af353be529f2e",
        "type": "image",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "thumbnail": false,
        "active": true,
        "pass": false,
        "outputs": 0,
        "x": 240,
        "y": 280,
        "wires": []
    },
    {
        "id": "ea5714d7c47c6cd0",
        "type": "image viewer",
        "z": "b40f79848dc7d67a",
        "name": "",
        "width": 160,
        "data": "payload",
        "dataType": "msg",
        "active": true,
        "x": 430,
        "y": 220,
        "wires": [
            [
                "d76b2319f77d2cea"
            ]
        ]
    },
    {
        "id": "63ca062c63ab4b95",
        "type": "ui_template",
        "z": "b40f79848dc7d67a",
        "group": "6e364b4a5bb6d701",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 780,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "d76b2319f77d2cea",
        "type": "template",
        "z": "b40f79848dc7d67a",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<img src = {{{payload}}} alt \"jacket\" width= \"350\" height=\"350\" >",
        "output": "str",
        "x": 560,
        "y": 140,
        "wires": [
            [
                "63ca062c63ab4b95"
            ]
        ]
    },
    {
        "id": "7d3c912cda946002",
        "type": "mqtt-broker",
        "name": "",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "120",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "6e364b4a5bb6d701",
        "type": "ui_group",
        "name": "Group",
        "tab": "f51c482d7f47e5f4",
        "order": null,
        "disp": true,
        "width": 6
    },
    {
        "id": "f51c482d7f47e5f4",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 1
    }
]

To avoid potential issues use

<img src="{{{payload}}}" alt "jacket" width= "350" height="350" >

note the double quotes.

sure. Thanks for reviewing :slight_smile:

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