# UI template image via msg.payload
**URL:** https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395
**Category:** Dashboard
**Created:** [29 October 2018 19:33 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395 "2018-10-29T19:33:57Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@sweetwater](https://discourse.nodered.org/u/sweetwater)
#### Post date: [29 October 2018 19:33 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/1 "2018-10-29T19:33:57Z")
Set up a UI TEMPLATE NODE.
Want to display an image
Method 1:
\![]()
This works fine.
Method 2:
using a function to set the
msg.payload = '[http://192.168.3.11/picture/snapshot.jpg](http://192.168.3.11/picture/snapshot.jpg)";
return msg;
Then in the UI Template passed in the msg.payload.
![]()
But the image does not show.
Any ideas?
---
### Author:  [@sweetwater](https://discourse.nodered.org/u/sweetwater)
#### Post date: [29 October 2018 19:59 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/2 "2018-10-29T19:59:33Z")
![]()
this works!
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [29 October 2018 20:41 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/3 "2018-10-29T20:41:57Z")
> [@sweetwater](#):
>
> this works!
Do you mean you have solved your problem?
---
### Author:  [@sweetwater](https://discourse.nodered.org/u/sweetwater)
#### Post date: [31 October 2018 19:14 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/4 "2018-10-31T19:14:06Z")
it worked.
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [22 February 2019 13:57 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/5 "2019-02-22T13:57:39Z")
**The goal is to display a picture from a http as a payload and display on the Dashboard with a UI Template :**
i try this :
> [@sweetwater](#):
>
> Method 2:
> using a function to set the
> msg.payload = '[http://192.168.3.11/picture/snapshot.jpg](http://192.168.3.11/picture/snapshot.jpg)";
> return msg;
>
> Then in the UI Template passed in the msg.payload.
**This is mine :**
```auto
msg.payload = 'https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png';
return msg;
```
**Then** i paste : `
` in the UI Template like this : 
**but nothing display :**
i missed something ?! @sweetwater
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [22 February 2019 14:36 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/6 "2019-02-22T14:36:14Z")
**i found the solution : in the UI Template paste this :** 😃
```auto
Status:
```
**And go further :**
**add** in the function node : `msg.title = 'Working good !' ;`
and in the UI Template : `title={{msg.title}}`
_display a message when the mouse is over_
---
### Author:  [@trihook](https://discourse.nodered.org/u/trihook)
#### Post date: [17 May 2019 01:07 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/8 "2019-05-17T01:07:44Z")
how to show the local image？
I use msg.payload = 'file:///home/ubuntu/1.png';
but failed
---
### Author:  [@munuluka](https://discourse.nodered.org/u/munuluka)
#### Post date: [27 October 2019 10:53 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/9 "2019-10-27T10:53:18Z")
im trying to get image from raspberry and post at dashboard. can anyone help me?
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [27 October 2019 19:12 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/10 "2019-10-27T19:12:26Z")
@trihook @munuluka
after put a picture in your raspberry in the folder `/home/pi/Pictures` ( `off.png` picture in this example) :
try this flow :
```auto
[{"id":"43f3ac9.5214a54","type":"inject","z":"1dec9bbc.37a314","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":2130,"wires":[["7fe75716.574148"]]},{"id":"49b00b00.d657b4","type":"ui_template","z":"1dec9bbc.37a314","group":"b930fe7e.897db","name":"","order":1,"width":"6","height":"6","format":"\n \n ![\"Image](\"data:image/png;base64,{{msg.payload}}\")
\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610,"y":2130,"wires":[[]]},{"id":"4a8daeb2.4a1a7","type":"base64","z":"1dec9bbc.37a314","name":"","action":"str","property":"payload","x":470,"y":2130,"wires":[["49b00b00.d657b4"]]},{"id":"7fe75716.574148","type":"file in","z":"1dec9bbc.37a314","name":"","filename":"/home/pi/Pictures/off.png","format":"","chunk":false,"sendError":false,"encoding":"none","x":280,"y":2130,"wires":[["4a8daeb2.4a1a7"]]},{"id":"b930fe7e.897db","type":"ui_group","z":"","name":"picture","tab":"250de740.57ee78","order":9,"disp":true,"width":"6","collapse":false},{"id":"250de740.57ee78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
this look like this :
and the result in Dashboard:
---
### Author:  [@munuluka](https://discourse.nodered.org/u/munuluka)
#### Post date: [1 November 2019 13:54 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/11 "2019-11-01T13:54:14Z")
what is base 64 pallete?
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [1 November 2019 13:57 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/12 "2019-11-01T13:57:24Z")
> **[node-red-node-base64](https://flows.nodered.org/node/node-red-node-base64)**
>
> A Node-RED node to pack and unpack objects to base64 format
---
### Author:  [@munuluka](https://discourse.nodered.org/u/munuluka)
#### Post date: [1 November 2019 14:00 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/13 "2019-11-01T14:00:01Z")
thanks both of you, now it works
---
### Author:  [@munuluka](https://discourse.nodered.org/u/munuluka)
#### Post date: [1 November 2019 14:01 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/14 "2019-11-01T14:01:33Z")
 but now only the image display in small area. can anyone help me solve this problem
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [1 November 2019 18:30 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/15 "2019-11-01T18:30:48Z")
**you have to play with this settings in the Template node :**
First try to change "Size" .
---
### Author:  [@munuluka](https://discourse.nodered.org/u/munuluka)
#### Post date: [10 November 2019 14:33 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/16 "2019-11-10T14:33:35Z")
thank you again , it works.
---
### Author:  [@onkel\_joerg](https://discourse.nodered.org/u/onkel_joerg)
#### Post date: [24 April 2020 16:49 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/17 "2020-04-24T16:49:32Z")
this works fine as long as the filename is fix.
But how to display a picture from the given directory on filename in msg.payload?
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [24 April 2020 21:03 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/18 "2020-04-24T21:03:38Z")
You have to inject a msg.filename with the way to the picture in.
Like this 2 examples:
```auto
[{"id":"3a1bff0b.55d3c","type":"ui_template","z":"a8b1b208.7036f","group":"c39cfd51.14f1c","name":"","order":1,"width":"6","height":"6","format":"\n \n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":920,"y":1510,"wires":[[]]},{"id":"db2e5ea3.ed84","type":"base64","z":"a8b1b208.7036f","name":"","action":"str","property":"payload","x":770,"y":1510,"wires":[["3a1bff0b.55d3c"]]},{"id":"bc137f20.f932b","type":"function","z":"a8b1b208.7036f","name":"msg.filename","func":"msg.filename = \"/home/pi/Pictures/off.png\";\nreturn msg;\n \n\n","outputs":1,"noerr":0,"x":340,"y":1510,"wires":[["4757d887.183fc8"]]},{"id":"ee87f65b.9f4398","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":1510,"wires":[["bc137f20.f932b"]]},{"id":"4757d887.183fc8","type":"file in","z":"a8b1b208.7036f","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":570,"y":1510,"wires":[["db2e5ea3.ed84"]]},{"id":"2672a340.075b0c","type":"change","z":"a8b1b208.7036f","name":"pay to msg.filename","rules":[{"t":"move","p":"payload","pt":"msg","to":"filename","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":1570,"wires":[["4757d887.183fc8"]]},{"id":"f4caf68a.661d88","type":"inject","z":"a8b1b208.7036f","name":"/home/pi/Pictures/off.png","topic":"","payload":"/home/pi/Pictures/off.png","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":1570,"wires":[["2672a340.075b0c"]]},{"id":"c39cfd51.14f1c","type":"ui_group","z":"","name":"camFoscam","tab":"250de740.57ee78","order":13,"disp":true,"width":"6","collapse":true},{"id":"250de740.57ee78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@onkel\_joerg](https://discourse.nodered.org/u/onkel_joerg)
#### Post date: [27 May 2020 01:33 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/19 "2020-05-27T01:33:07Z")
Thank you.
Works like a charm.
"msg.filename" was the point
Sorry for late reply.
---
### Author:  [@Guillem](https://discourse.nodered.org/u/Guillem)
#### Post date: [13 September 2024 12:06 UTC](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/20 "2024-09-13T12:06:04Z")
Hi,
I could show the image. I put like SuperNinja said. and also I put a image\_preview.
On Image\_preview I see the image.
On /ui/ web I couldn't see anything.
Thanks for your help,
Guillem