Display image in buffer in template node

[Sirhc]

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"

[krambriw]

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

[krambriw]

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

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

[Steve-Mcl]

@krambriw

For dashboard-2

For dashboard 2.0, you can checkout the live demos linked from the ui-template

[krambriw]

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!

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

[Sirhc]

Thank you!