Problem Getting Image in Template Node

tcontrada · 13 June 2019 18:41

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...

zenofmud · 13 June 2019 19:09

Are you isomg the template node or ui_template node?

tcontrada · 13 June 2019 19:43

UI-template

zenofmud · 13 June 2019 20:40

could you provide the flow? Make sure to read this first: How to share code or flow json

tcontrada · 13 June 2019 20:56

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

zenofmud · 13 June 2019 21:07

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>

`

knolleary · 13 June 2019 21:59

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

tcontrada · 14 June 2019 12:44

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

Bimgo · 31 May 2020 06:29

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...

i have activated : http/Static: '/home/pi/camera/'
try with :
or
as zenofmud say (but can show you the copy-past of my code...)
i try to check in my browser if i can see the image but nothing except : Cannot GET /photo.jpg

there is my flow :

[{"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.

zenofmud · 31 May 2020 10:25

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

Bimgo · 31 May 2020 12:40

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

zenofmud · 31 May 2020 14:41

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.

Topic		Replies	Views
Can you put Pictures in/on `template` node? Dashboard	13	1222	4 May 2022
Show images from a template Dashboard	23	1504	21 June 2022
Cannot display image using html in ui-template Dashboard function-node	5	238	10 June 2023
Image not displayed in node-red-contrib-ui-media Dashboard	12	3318	9 December 2020
Trying to display a base64 image from webcam on dashboard Dashboard	5	376	14 December 2022

Problem Getting Image in Template Node

Related Topics