# Problem Getting Image in Template Node

**URL:** <https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193>\
**Category:** Dashboard\
**Created:** [13 June 2019 18:41 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193 "2019-06-13T18:41:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [13 June 2019 18:41 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/1 "2019-06-13T18:41:58Z")

</div>

I looked around the form, but could not get anything to work correctly.

I want to simply display an image in the dashboard template node.

I have my image file in the **.node-red\node\_modules\node-red-dashboard\dist** folder  
and I can view the image in the browser at **localhost:1880/ui/Alarm\_On.png**

The code in the Template Node is

`<div><img ng-src="http:/localhost:1880/ui/Alarm_On.png"></div>`

Why doesn't this display the image?

Thanks...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2019 19:09 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/2 "2019-06-13T19:09:08Z")

</div>

Are you isomg the `template` node or `ui_template` node?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [13 June 2019 19:43 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/3 "2019-06-13T19:43:25Z")

</div>

UI-template

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2019 20:40 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/4 "2019-06-13T20:40:11Z")

</div>

could you provide the flow? Make sure to read this first: [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [13 June 2019 20:56 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/5 "2019-06-13T20:56:11Z")

</div>

The flow is an **Inject Node** to Trigger the **ui\_template node** , the code is in my first post. It's that simple...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2019 21:07 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/6 "2019-06-13T21:07:07Z")

</div>

Instead of:  
`<div><img ng-src="http:/localhost:1880/ui/Alarm_On.png"></div>`  
try  
`<div><img src="http:/localhost:1880/ui/Alarm_On.png"></div>`

`

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [13 June 2019 21:59 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/7 "2019-06-13T21:59:17Z")

</div>

Also, it needs to start `http://` not `http:/`

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [14 June 2019 12:44 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/8 "2019-06-14T12:44:36Z")

</div>

Thanks, I thought I needed the ng-src in there. Also had a type-o on the http://.

🙂

---

<div class="post-metadata">

**Author:** ![Bimgo](https://avatars.discourse-cdn.com/v4/letter/b/22d042/32.png) [@Bimgo](https://discourse.nodered.org/u/Bimgo)\
**Post date:** [31 May 2020 06:29 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/9 "2020-05-31T06:29:35Z")

</div>

Sorry for use this topic, but i have the same problem...

I'm new in the node-red world and try to make an webcam interface at home.

i try to see an image on ui-template node but noting work for me...

1. i have activated : http/Static: '/home/pi/camera/'
2. try with : 

 or 
 ![]()
 as zenofmud say (but can show you the copy-past of my code...)
3. i try to check in my browser if i can see the image but nothing except : Cannot GET /photo.jpg

there is my flow :

```auto
[{"id":"e471ba47.a24af","type":"inject","z":"e47318e0.1aa898","name":"","topic":"","payload":"","payloadType":"date","repeat":"600","crontab":"","once":true,"onceDelay":"1","x":110,"y":320,"wires":[["bb8e3e5a.a39bb8","c03fecef.96f428","67533b0b.a34234"]]},{"id":"8885d76a.629478","type":"exec","z":"e47318e0.1aa898","command":"fswebcam --rotate 180 -r 1280x720 -d /dev/video3 -f image","addpay":true,"append":"","useSpawn":"false","timer":"","name":"video3","x":420,"y":460,"wires":[["9333ec3.e11a41","885b2d2d.b49cf8","aa8fd918.8146e8"],[],["12197c07.a249bc"]]},{"id":"841bd324.c30f2","type":"image","z":"e47318e0.1aa898","name":"","width":"1024","data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1080,"y":480,"wires":[]},{"id":"9333ec3.e11a41","type":"file in","z":"e47318e0.1aa898","name":"","filename":"/home/pi/camera/photo3.jpg","format":"","x":690,"y":460,"wires":[["841bd324.c30f2"]]},{"id":"bb8e3e5a.a39bb8","type":"change","z":"e47318e0.1aa898","name":"Set filename","rules":[{"t":"set","p":"payload","pt":"msg","to":"/home/pi/camera/photo3.jpg ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":240,"y":460,"wires":[["8885d76a.629478"]]},{"id":"12197c07.a249bc","type":"function","z":"e47318e0.1aa898","name":"Statistics","func":"var now = new Date();\nvar stat = context.get(\"stat\");\nif (stat===undefined) {\n // Initialize the object in case NR restart\n stat = { \"count\": 0, \"success\": 0, \"rate\": 0.0, \"last\": now};\n}\nif (msg.topic===\"reset\") {\n // Reset message was received: reset statistics\n stat = { \"count\": 0, \"success\": 0, \"rate\": 0.0, \"last\": now};\n} else {\n // Update statistics\n stat.count++;\n if (msg.payload.code===0) {\n stat.success++;\n } \n stat.rate=stat.success/stat.count;\n stat.last=now;\n}\n\n// Create formatted time\nvar yyyy = now.getFullYear();\nvar mm = now.getMonth() < 9 ? \"0\" + (now.getMonth() + 1) : (now.getMonth() + 1); // getMonth() is zero-based\nvar dd = now.getDate() < 10 ? \"0\" + now.getDate() : now.getDate();\nvar hh = now.getHours() < 10 ? \"0\" + now.getHours() : now.getHours();\nvar mmm = now.getMinutes() < 10 ? \"0\" + now.getMinutes() : now.getMinutes();\nvar ss = now.getSeconds() < 10 ? \"0\" + now.getSeconds() : now.getSeconds();\n\nmsg.formattedtime = dd + \".\" + mm + \".\" + yyyy + \" \" + hh + \":\" + mmm + \":\" + ss;\nmsg.success = stat.success;\nmsg.rate = Math.floor(stat.rate*100);\n\nnode.status({fill:\"blue\",shape:\"ring\",text:\"Images: \"+msg.success+\" | \"+msg.rate+\"% | Mise à jour: \"+dd + \".\" + mm + \".\" + yyyy + \" \" + hh + \":\" + mmm + \":\" + ss});\n\n\n// Saving data in the context\ncontext.set(\"stat\",stat);\n\nreturn msg;\n\n\n","outputs":1,"noerr":0,"x":620,"y":640,"wires":[["ff9392fe.915aa","e76d77f2.61362","6861e0c4.940ce"]]},{"id":"ff9392fe.915aa","type":"ui_text","z":"e47318e0.1aa898","group":"d27ac4c9.d3c04","order":1,"width":0,"height":0,"name":"Last time","label":"Derrnière image :","format":"{{msg.formattedtime}}","layout":"row-spread","x":821.0000839233398,"y":560.3999919891357,"wires":[]},{"id":"e76d77f2.61362","type":"ui_text","z":"e47318e0.1aa898","group":"d27ac4c9.d3c04","order":2,"width":0,"height":0,"name":"Frame count","label":"Nombre d'images prises","format":"{{msg.success}}","layout":"row-spread","x":830.8999900817871,"y":596.1999807357788,"wires":[]},{"id":"6861e0c4.940ce","type":"ui_text","z":"e47318e0.1aa898","group":"d27ac4c9.d3c04","order":3,"width":0,"height":0,"name":"Success rate","label":"Success rate","format":"{{msg.rate}} %","layout":"row-spread","x":831.8999633789062,"y":634.1999740600586,"wires":[]},{"id":"d8513b65.9b838","type":"inject","z":"e47318e0.1aa898","name":"Reset stat","topic":"reset","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"","x":440,"y":660,"wires":[["12197c07.a249bc"]]},{"id":"885b2d2d.b49cf8","type":"ui_template","z":"e47318e0.1aa898","group":"d27ac4c9.d3c04","name":"Static image","order":2,"width":0,"height":0,"format":"<div><img src=\"http://192.168.0.25:1880/photo.jpg\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":640,"y":500,"wires":[[]]},{"id":"aa8fd918.8146e8","type":"ui_template","z":"e47318e0.1aa898","group":"d27ac4c9.d3c04","name":"Static image","order":2,"width":0,"height":0,"format":"<div><img ng-src=\"http://192.168.0.25:1880/photo.jpg\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":640,"y":540,"wires":[[]]},{"id":"d27ac4c9.d3c04","type":"ui_group","z":"","name":"Webcam","tab":"814e6282.561b38","order":1,"disp":true,"width":"6","collapse":false},{"id":"814e6282.561b38","type":"ui_tab","z":"","name":"Photo","icon":"perm_media","order":1,"disabled":false,"hidden":false}]

```

Thanks to any help you can give me with this problem.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [31 May 2020 10:25 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/10 "2020-05-31T10:25:42Z")

</div>

Have you tried putting a `debug` node (set to display the Complete msg object) on the output of the `file-out` node?

Also add a `debug` node to the stderr output of the `exec` node.

And add in a `catch` node connected to another `debug` node (set to display the Complete msg object) and see what you get

---

<div class="post-metadata">

**Author:** ![Bimgo](https://avatars.discourse-cdn.com/v4/letter/b/22d042/32.png) [@Bimgo](https://discourse.nodered.org/u/Bimgo)\
**Post date:** [31 May 2020 12:40 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/11 "2020-05-31T12:40:13Z")

</div>

Hello thx zenofmud for your reponse  
I have put the debug node but onestly i don't now what can i do with this information...

with debug node i can see the information send from each node but i don't see nothing for my image adress.  
thanks

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [31 May 2020 14:41 UTC](https://discourse.nodered.org/t/problem-getting-image-in-template-node/12193/12 "2020-05-31T14:41:32Z")

</div>

Post the info from the debug nodes ao we can see what it is.

It's a good idea to give each debug node a name so you can tell which debug is reporting the information.