# Pushing a base64 encoded image to dashboard D2

**URL:** <https://discourse.nodered.org/t/pushing-a-base64-encoded-image-to-dashboard-d2/87052>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [7 April 2024 06:06 UTC](https://discourse.nodered.org/t/pushing-a-base64-encoded-image-to-dashboard-d2/87052 "2024-04-07T06:06:06Z")\
**Posts on this page:** 1\
**Showing post:** 5

<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:** [7 April 2024 08:01 UTC](https://discourse.nodered.org/t/pushing-a-base64-encoded-image-to-dashboard-d2/87052/5 "2024-04-07T08:01:49Z")

</div>

> [@BartButenaers](#):
>
> Anyway I am trying to migrate my old dashboard to D2, but I am stuck with this simple flow to push a base64 encoded image and show it:
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05c2f178e56a65655726cd67e65e5a589f3ad22d.png)
> 
> ```auto
> [{"id":"2f477a1223387dfb","type":"http request","z":"320444070953412f","name":"","method":"GET","ret":"bin","paytoqs":"ignore","url":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/A-maze-ing-Laughter-001_BMK.jpg/800px-A-maze-ing-Laughter-001_BMK.jpg?20140208145224","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"basic","senderr":false,"headers":[],"x":330,"y":480,"wires":[["c51f3f4c566a5ab9"]]},{"id":"c51f3f4c566a5ab9","type":"base64","z":"320444070953412f","name":"Encode","action":"","property":"payload","x":500,"y":480,"wires":[["7335e86fba8a34a4"]]},{"id":"7335e86fba8a34a4","type":"ui-template","z":"320444070953412f","group":"2980b33865f3a94a","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <img :src=\"`data:image/jpg;base64,${msg.payload}`\" />\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":660,"y":480,"wires":[[]]},{"id":"782a888e9537f0c1","type":"inject","z":"320444070953412f","name":"load image","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":480,"wires":[["2f477a1223387dfb"]]},{"id":"2980b33865f3a94a","type":"ui-group","name":"Snapshots","page":"8fe11f0a1785825d","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"8fe11f0a1785825d","type":"ui-page","name":"Cameras","ui":"be29745a6e568f30","path":"/page6","icon":"cctv","layout":"grid","theme":"092547d34959327c","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
> 
> ```
> 
> I tried a couple of different templates:
> 
> ```auto
> <template>
> <img src="data:image/jpg;base64,{{msg.payload}}" />
> </template>
> 
> ```
> 
> And:
> 
> ```auto
> <template>
> <img :src="`data:image/jpg;base64,${msg.payload}`" />
> </template>
> 
> ```
> 
> But none of these seem to work for me:

Worked first time for me Bart.

![SQLiteStudio_x8NL0HLKpk](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b4bb681e584d0a09b19eadf4a7c9d81d63b74da.gif)

I didnt have the base64 node so simply used a function node instead (should make zero difference)

```auto
msg.payload = Buffer.from(msg.payload).toString('base64')
return msg;

```

As you can see from the gif, deploy -\> inject - \> tada

---

_[View the full topic](https://discourse.nodered.org/t/pushing-a-base64-encoded-image-to-dashboard-d2/87052)._