# Image display issue

**URL:** <https://discourse.nodered.org/t/image-display-issue/69601>\
**Category:** Dashboard\
**Created:** [26 October 2022 06:46 UTC](https://discourse.nodered.org/t/image-display-issue/69601 "2022-10-26T06:46:28Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [26 October 2022 06:46 UTC](https://discourse.nodered.org/t/image-display-issue/69601/1 "2022-10-26T06:46:28Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2905f26fbfb315b24c84a5242f857871e3ce350.png)  
HERE Is the data which seems incomplete. see dots in the end. (Can I increase it size to hold longer string (base64)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f876e0714100257bc25ad3350bbb600feb8279c4.png)

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

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 October 2022 07:38 UTC](https://discourse.nodered.org/t/image-display-issue/69601/2 "2022-10-26T07:38:21Z")

</div>

> [@syedfarrukhqamar](#):
>
> HERE Is the data which seems incomplete. see dots in the end.

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?

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [26 October 2022 08:05 UTC](https://discourse.nodered.org/t/image-display-issue/69601/3 "2022-10-26T08:05:51Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 October 2022 08:32 UTC](https://discourse.nodered.org/t/image-display-issue/69601/4 "2022-10-26T08:32:40Z")

</div>

> [@syedfarrukhqamar](#):
>
> You are right. But some how it is incomplete even from the mqtt node if I attach a debug node and see the outcome.

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.

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [26 October 2022 09:07 UTC](https://discourse.nodered.org/t/image-display-issue/69601/5 "2022-10-26T09:07:57Z")

</div>

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/](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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/3431c74a7da6646937c35f1f536fcb6e769fd48c.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 October 2022 09:21 UTC](https://discourse.nodered.org/t/image-display-issue/69601/6 "2022-10-26T09:21:29Z")

</div>

> [@syedfarrukhqamar](#):
>
> But the issue is I cannot see the image on the live dashboard

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

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [26 October 2022 17:27 UTC](https://discourse.nodered.org/t/image-display-issue/69601/7 "2022-10-26T17:27:58Z")

</div>

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.

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

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 October 2022 17:37 UTC](https://discourse.nodered.org/t/image-display-issue/69601/8 "2022-10-26T17:37:32Z")

</div>

This has been done loads of times on the forum.

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

> [@How to MQTT image from Raspi using Base64 and Template node](https://discourse.nodered.org/t/how-to-mqtt-image-from-raspi-using-base64-and-template-node/42142/4):
>
> Almost - you need the backticks above and below (on their own lines) (I'll edit it again) I never said you were. I said ... And I said that because you posted the following flow... Anyhow, onto your issues... there were a couple of things wrong. As I dont run an IBM Cloud instance, I have tweaked things around to get it working on a PI... flow... dashboard... demo flow... [{"id":"ed24352e.c554d8","type":"image viewer","z":"c966426a.35dc8","n…

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [27 October 2022 04:39 UTC](https://discourse.nodered.org/t/image-display-issue/69601/9 "2022-10-27T04:39:04Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a71914fc6524e901731f9f4a4370020811758d43.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae8a85ba6d368acc870199f61592624c979caf15.png)  
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.

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

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [27 October 2022 04:57 UTC](https://discourse.nodered.org/t/image-display-issue/69601/10 "2022-10-27T04:57:54Z")

</div>

You only exported the mqtt node.

How did you format the payload in the template node ?

```auto
{{payload}}

```

or

```auto
{{{payload}}}

```

?

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

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [27 October 2022 05:33 UTC](https://discourse.nodered.org/t/image-display-issue/69601/11 "2022-10-27T05:33:03Z")

</div>

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

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a18e18ef0df874aae677e831389768d240d95d2.png)

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

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [27 October 2022 06:02 UTC](https://discourse.nodered.org/t/image-display-issue/69601/12 "2022-10-27T06:02:54Z")

</div>

> [@syedfarrukhqamar](#):
>
> `<img src = {{{payload}}} alt "jacket" width= "350" height="350" >`

To avoid potential issues use

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

```

note the double quotes.

---

<div class="post-metadata">

**Author:** ![syedfarrukhqamar](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedfarrukhqamar/32/69739_2.png) [@syedfarrukhqamar](https://discourse.nodered.org/u/syedfarrukhqamar)\
**Post date:** [27 October 2022 06:03 UTC](https://discourse.nodered.org/t/image-display-issue/69601/13 "2022-10-27T06:03:40Z")

</div>

sure. Thanks for reviewing 🙂

---

<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:** [26 December 2022 06:03 UTC](https://discourse.nodered.org/t/image-display-issue/69601/14 "2022-12-26T06:03:56Z")

</div>

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