# Display image in buffer in template node

**URL:** <https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001>\
**Category:** General\
**Created:** [9 November 2024 00:52 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001 "2024-11-09T00:52:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [9 November 2024 00:52 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/1 "2024-11-09T00:52:23Z")

</div>

hello

I have an image which is stored as a buffer. I want to display this image in a template node so that I can view it whilst on my nodered dashboard.

In the template node I have the following, but I'm not sure how to display the image in the \<img tag?

> img src="UNSURE?" id="c5" width="700" height="700"

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [9 November 2024 05:37 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/2 "2024-11-09T05:37:43Z")

</div>

And then the default question: what is the dashboard version and type you are using? There are several....

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [9 November 2024 08:57 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/3 "2024-11-09T08:57:13Z")

</div>

If you happen to use dashboard-1, then this example is pretty straight forward. The key is you have to send the image data as base64

For dashboard-2 I think this simple example will not work, something else is needed

```auto
[{"id":"39fd7ca.7c8ba84","type":"ui_template","z":"c66150ba6c5c5715","d":true,"group":"d86e3ba5.2791c8","name":"Image","order":0,"width":"6","height":"6","format":"<img width=\"16\" height=\"16\" alt=\"star\" src=\"data:image/gif;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":580,"y":1230,"wires":[[]]},{"id":"b627a1e0.86db7","type":"inject","z":"c66150ba6c5c5715","d":true,"name":"","props":[{"p":"payload","v":"R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7","vt":"str"},{"p":"topic","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"topic":"","payload":"R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7","payloadType":"str","x":328.99998474121094,"y":1231.800033569336,"wires":[["39fd7ca.7c8ba84"]]},{"id":"d86e3ba5.2791c8","type":"ui_group","name":"Group 2","tab":"5b6bf4.ffa4940c","order":2,"disp":true,"width":6},{"id":"5b6bf4.ffa4940c","type":"ui_tab","name":"Home","icon":"dashboard","order":3}]

```

---

<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:** [9 November 2024 09:23 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/4 "2024-11-09T09:23:13Z")

</div>

> [@krambriw](#):
>
> For dashboard-2

For dashboard 2.0, you can checkout the live demos linked from the [ui-template](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

 ![Screenshot_20241109-092151](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/9726d006c0e781f21f661fde8a0baefce55bdacf.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [9 November 2024 11:27 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/5 "2024-11-09T11:27:56Z")

</div>

Perfect, thanks @Steve-Mcl

Sample of a simple flow where I take a snapshot from a camera, sends the image data as buffer via MQTT, decodes it to base64, adds some additional required in the change node and then sends it to your ui\_template. For testing purpose I added the inject that has the base64 data already inside

Works perfect, again, thanks a lot!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/893c6b345c1b92cae6aa4f252f6cf6bff80a6dde.png)

```auto
[{"id":"d98d38ad.2672c8","type":"mqtt in","z":"c66150ba6c5c5715","name":"Image","topic":"motion/#","qos":"0","datatype":"auto-detect","broker":"32e03b0d.1b7394","nl":false,"rap":false,"inputs":0,"x":220,"y":1490,"wires":[["803aec50.7fc51"]]},{"id":"803aec50.7fc51","type":"base64","z":"c66150ba6c5c5715","name":"Encode","action":"","property":"payload","x":380,"y":1490,"wires":[["c5550de8c4a0422d"]]},{"id":"b627a1e0.86db7","type":"inject","z":"c66150ba6c5c5715","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"data:image/jpg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7","payloadType":"str","x":600,"y":1420,"wires":[["02541b5218b45033"]]},{"id":"02541b5218b45033","type":"ui-template","z":"c66150ba6c5c5715","group":"0e39fda011d09064","page":"","ui":"","name":"","order":3,"width":"6","height":"4","head":"","format":"<!-- https://vuetifyjs.com/en/components/images/#usage -->\n\n<template>\n <div>\n Image src: {{ info || 'none' }}\n <v-img\n v-if=\"msg.payload\"\n :width=\"msg.width || 150\"\n aspect-ratio=\"msg.aspec || 16/9\"\n cover\n :src=\"msg.payload\"\n ></v-img>\n </div>\n</template>\n\n<script>\n export default {\n computed: {\n info: function () {\n if (!this.msg.payload) {\n return ''\n }\n if (this.msg.payload.length > 80) {\n return this.msg.payload.substring(0,77) + \"...\"\n }\n return this.msg.payload\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":760,"y":1490,"wires":[[]]},{"id":"c5550de8c4a0422d","type":"change","z":"c66150ba6c5c5715","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"\"data:image/jpg;base64,\" & payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":1490,"wires":[["02541b5218b45033"]]},{"id":"32e03b0d.1b7394","type":"mqtt-broker","name":"","broker":"192.168.0.233","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"0e39fda011d09064","type":"ui-group","name":"Group 4","page":"f85cf0eee9119058","width":"4","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"f85cf0eee9119058","type":"ui-page","name":"Hemma","ui":"72c1e5a9ec204878","path":"/home","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"72c1e5a9ec204878","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0c4f05beae18d4edf8f4c65dbf57ada478efc2d.png)

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [13 November 2024 02:35 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/6 "2024-11-13T02:35:02Z")

</div>

Thank you!

---

<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:** [27 November 2024 02:35 UTC](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/7 "2024-11-27T02:35:54Z")

</div>

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