# Visibility images via ui\_template

**URL:** <https://discourse.nodered.org/t/visibility-images-via-ui-template/6488>\
**Category:** Dashboard\
**Created:** [7 January 2019 07:05 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488 "2019-01-07T07:05:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 January 2019 07:05 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/1 "2019-01-07T07:05:08Z")

</div>

I have images imported into the dashboard via ui\_template, but these are not displayed immediately after the deploy, but only when you inijiert they, then leave the tab and goes new to it then they displayed

 ![images_node-red](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/725c615deac70fdae201124b847304c3e14c5d9b.png)

only one of four images are displayed after the deploy.

What´s the reason for that?

---

<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:** [7 January 2019 10:15 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/2 "2019-01-07T10:15:40Z")

</div>

with out a bit more information all anyone can do is make a wild guess.  
basics:

1. version of NR, node.js and dashboard
2. platform (ie Rpi, Windows etc)
3. copy your flow, strip it to the bare minimun that shows the problem and attach it
4. where are you storing images
5. what permissions do those images have
6. have you used chromes java console to look for errors

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 January 2019 10:27 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/3 "2019-01-07T10:27:47Z")

</div>

1. Version of NR: v0.19.5
2. Plattform: Rpi  
3:

> [{"id":"6eec693c.ffc88","type":"ui\_template","z":"7a823edc.4e5798","group":"c0564eb0.fc0d","name":"Q2","order":1,"width":0,"height":0,"format":"\<img widht="100" ng-src="{{msg.payload}}" ng-click="send({payload:'1'})"/\>\n\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":950,"y":780,"wires":[["c80f62f2.5ed56"]]},{"id":"fdc67382.6c1268","type":"function","z":"7a823edc.4e5798","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:"/grunein.png"};\n}\nelse{\n return{payload:"/grunaus.png"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":780,"wires":[["6eec693c.ffc88"]]},{"id":"94d85d16.37be9","type":"mqtt in","z":"7a823edc.4e5798","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q2/Value","qos":"2","broker":"2916a29a.815e36","x":210,"y":780,"wires":[["fdc67382.6c1268"]]},{"id":"c1948757.e3e3a8","type":"mqtt in","z":"7a823edc.4e5798","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q3/Value","qos":"2","broker":"2916a29a.815e36","x":210,"y":600,"wires":[["d29f426c.659f28"]]},{"id":"2cb09b70.e9d514","type":"mqtt in","z":"7a823edc.4e5798","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q4/Value","qos":"2","broker":"2916a29a.815e36","x":250,"y":440,"wires":[["43585d8f.220394"]]},{"id":"e464f10d.913fa8","type":"mqtt in","z":"7a823edc.4e5798","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/IQ1/Value","qos":"2","broker":"2916a29a.815e36","x":280,"y":320,"wires":[["4e20d4f.4ae65ac"]]},{"id":"4e20d4f.4ae65ac","type":"function","z":"7a823edc.4e5798","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:"/grunein.png"};\n}\nelse{\n return{payload:"/grunaus.png"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":320,"wires":[["cec04758.8d2638"]]},{"id":"cec04758.8d2638","type":"ui\_template","z":"7a823edc.4e5798","group":"38b37188.f9d23e","name":"IQ1","order":2,"width":0,"height":0,"format":"\<img width="100;" ng-src="{{msg.payload}}" /\>\n\n\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":950,"y":320,"wires":[["641f005f.de949"]]},{"id":"ba47cc67.8bb02","type":"ui\_template","z":"7a823edc.4e5798","group":"54c98c6a.fc0b84","name":"Q4","order":2,"width":0,"height":0,"format":"\<img width="100;" ng-src="{{msg.payload}}" /\>\n\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":950,"y":440,"wires":[["3829d8ec.a7abe"]]},{"id":"43585d8f.220394","type":"function","z":"7a823edc.4e5798","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:"/grunein.png"};\n}\nelse{\n return{payload:"/grunaus.png"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":440,"wires":[["ba47cc67.8bb02"]]},{"id":"d29f426c.659f28","type":"function","z":"7a823edc.4e5798","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:"/grunein.png"};\n}\nelse{\n return{payload:"/grunaus.png"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":600,"wires":[["f8cbab2e.8b0e48"]]},{"id":"f8cbab2e.8b0e48","type":"ui\_template","z":"7a823edc.4e5798","group":"f9de034c.1f35b","name":"Q3","order":1,"width":0,"height":0,"format":"\<img widht="100" height="100" ng-src="{{msg.payload}}" ng-click="send({payload:'1'})"/\>\n\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":970,"y":600,"wires":[["b1c163cc.f83d18"]]},{"id":"c0564eb0.fc0d","type":"ui\_group","z":"","name":"Q2","tab":"fc129880.475208","order":6,"disp":true,"width":"4","collapse":false},{"id":"2916a29a.815e36","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"38b37188.f9d23e","type":"ui\_group","z":"","name":"IQ1","tab":"fc129880.475208","order":3,"disp":true,"width":"4","collapse":false},{"id":"54c98c6a.fc0b84","type":"ui\_group","z":"","name":"Q4","tab":"fc129880.475208","order":4,"disp":true,"width":"4","collapse":false},{"id":"f9de034c.1f35b","type":"ui\_group","z":"","name":"Q3","tab":"fc129880.475208","order":5,"disp":true,"width":"4","collapse":false},{"id":"fc129880.475208","type":"ui\_tab","z":"","name":"Home","icon":"dashboard","order":1}]

4 Storing images: /home/pi/pictures  
5 what do you mean with permissions ?  
6 no

---

<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:** [7 January 2019 10:36 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/4 "2019-01-07T10:36:00Z")

</div>

> [@Tobi](#):
>
> 3 [{"id":"6eec693c.ffc88","type":"ui\_template","z":"7a823edc.4e5798","group":"c0564eb0.fc0d","name":"Q2","order":1,"width":0,"height":0,"format":"\<img widht="100" ng-src="{{msg.payload}}" ng-click="send({payload:'1...

Is this a stripped version of your flow? also please read [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) and edit your post to fix the flow

> [@Tobi](#):
>
> 5 what do you mean with permissions ?

the read/write/execute permissions. If you do a `ls -al /home/pi/pictures` you will see the options

> [@Tobi](#):
>
> 6 no

do you plan to?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 January 2019 10:52 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/5 "2019-01-07T10:52:19Z")

</div>

Sorry it should be the whole flow

`[{"id":"c67548ca.4ece2","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"29059c22.6445d4","type":"function","z":"c67548ca.4ece2","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:\"/grunein.png\"};\n}\nelse{\n return{payload:\"/grunaus.png\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":420,"wires":[["7d8578bc.e264a8"]]},{"id":"7d8578bc.e264a8","type":"ui_template","z":"c67548ca.4ece2","group":"f9de034c.1f35b","name":"Q3","order":1,"width":0,"height":0,"format":"<img widht=\"100\" height=\"100\" ng-src=\"{{msg.payload}}\" ng-click=\"send({payload:'1'})\"/>\n<!--\n<style>\n #Home_Q3,\n #Home_Q3_cards {\n background: rgba(1,1,1,0);\n border: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n }\n #Home_Q3,\n #Home_Q3 md-card{\n background: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n border: (1,1,1,0);\n }\n</style>\n-->\n<!--\n<style>\n #Home_Q3,\n #Home_Q3_cards{\n position: fixed;\n top: 12vh;\n right: 34vw;\n height: 40vh;\n }\n</style>\n-->","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":990,"y":420,"wires":[["3dc10129.8df7c6"]]},{"id":"3dc10129.8df7c6","type":"trigger","z":"c67548ca.4ece2","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"200","extend":false,"units":"ms","reset":"","bytopic":"all","name":"","x":760,"y":500,"wires":[["5df3a899.dff258","29059c22.6445d4"]]},{"id":"5df3a899.dff258","type":"mqtt out","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/HMICommands/SafetySwitch/I4/Value","qos":"2","retain":"","broker":"2916a29a.815e36","x":1180,"y":500,"wires":[]},{"id":"8aa7c391.d1cc78","type":"ui_template","z":"c67548ca.4ece2","group":"c0564eb0.fc0d","name":"Q2","order":1,"width":0,"height":0,"format":"<img widht=\"100\" ng-src=\"{{msg.payload}}\" ng-click=\"send({payload:'1'})\"/>\n<!--\n<style>\n #Home_Q2,\n #Home_Q2_cards {\n background: rgba(1,1,1,0);\n border: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n }\n #Home_Q2,\n #Home_Q2 md-card{\n background: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n border: (1,1,1,0);\n }\n</style>\n-->\n<!--\n<style>\n #Home_Q2,\n #Home_Q2_cards{\n position: fixed;\n top: 12vh;\n right: 20vw;\n height: 40vh;\n }\n</style>\n-->","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":970,"y":600,"wires":[["a1657f1b.cfad98"]]},{"id":"62810fb.0821cf","type":"function","z":"c67548ca.4ece2","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:\"/grunein.png\"};\n}\nelse{\n return{payload:\"/grunaus.png\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":600,"wires":[["8aa7c391.d1cc78"]]},{"id":"a1657f1b.cfad98","type":"trigger","z":"c67548ca.4ece2","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"200","extend":false,"units":"ms","reset":"","bytopic":"all","name":"","x":780,"y":680,"wires":[["1527a9db.5435fe","62810fb.0821cf"]]},{"id":"1527a9db.5435fe","type":"mqtt out","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/HMICommands/EmergencyStopReset/I3/Value","qos":"2","retain":"","broker":"2916a29a.815e36","x":1210,"y":680,"wires":[]},{"id":"2789d700.1b13aa","type":"mqtt in","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q2/Value","qos":"2","broker":"2916a29a.815e36","x":230,"y":600,"wires":[["62810fb.0821cf"]]},{"id":"4dec52e.0b6b1ac","type":"mqtt in","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q3/Value","qos":"2","broker":"2916a29a.815e36","x":230,"y":420,"wires":[["29059c22.6445d4"]]},{"id":"5c71e4a2.faaadc","type":"mqtt in","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/Q4/Value","qos":"2","broker":"2916a29a.815e36","x":270,"y":260,"wires":[["ef3424b4.c7f59"]]},{"id":"ef3424b4.c7f59","type":"function","z":"c67548ca.4ece2","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:\"/grunein.png\"};\n}\nelse{\n return{payload:\"/grunaus.png\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":260,"wires":[["3c7ab384.26a4b4"]]},{"id":"3c7ab384.26a4b4","type":"ui_template","z":"c67548ca.4ece2","group":"54c98c6a.fc0b84","name":"Q4","order":2,"width":0,"height":0,"format":"<img width=\"100;\" ng-src=\"{{msg.payload}}\" />\n<!--\n<style>\n #Home_Q4,\n #Home_Q4_cards {\n background: rgba(1,1,1,0);\n border: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n }\n #Home_Q4,\n #Home_Q4 md-card{\n background: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n border: (1,1,1,0);\n }\n</style>\n -->\n<!--\n<style>\n #Home_Q4,\n #Home_Q4_cards{\n position: fixed;\n top: 12vh;\n right: 48vw;\n height: 40vh;\n }\n</style>\n-->","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":970,"y":260,"wires":[[]]},{"id":"f286a5fa.71e778","type":"ui_template","z":"c67548ca.4ece2","group":"38b37188.f9d23e","name":"IQ1","order":2,"width":0,"height":0,"format":"<img width=\"100;\" ng-src=\"{{msg.payload}}\" />\n<!-- <img style=\"\"height: 22.5vh; width: 12vw;\" ng-src=\"{{msg.payload}}\" /> -->\n<!--<style>\n #Home_IQ1,\n #Home_IQ1_cards {\n background: rgba(1,1,1,0);\n border: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n }\n #Home_IQ1,\n #Home_IQ1 md-card{\n background: rgba(1,1,1,0);\n color: rgba(1,1,1,0);\n border: (1,1,1,0);\n }\n\n</style>\n -->\n<!--<style>\n #Home_IQ1,\n #Home_IQ1_cards{\n position: fixed;\n top: 12vh;\n right: 62vw;\n height: 40vh;\n }\n</style>\n-->","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":970,"y":140,"wires":[[]]},{"id":"69eb6058.98223","type":"function","z":"c67548ca.4ece2","name":"Bild abhängig von payload","func":"if(msg.payload==1){\n return {payload:\"/grunein.png\"};\n}\nelse{\n return{payload:\"/grunaus.png\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":740,"y":160,"wires":[["f286a5fa.71e778"]]},{"id":"77640269.09cb2c","type":"mqtt in","z":"c67548ca.4ece2","name":"","topic":"DemoKoffer/SP-COP2-ENI-P/Output/LED/IQ1/Value","qos":"2","broker":"2916a29a.815e36","x":320,"y":160,"wires":[["69eb6058.98223"]]},{"id":"da29dbd7.390e5","type":"inject","z":"c67548ca.4ece2","name":"","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"00 00 * * *","once":false,"onceDelay":0.1,"x":430,"y":360,"wires":[["69eb6058.98223","ef3424b4.c7f59","62810fb.0821cf","29059c22.6445d4","3dc10129.8df7c6","a1657f1b.cfad98"]]},{"id":"f9de034c.1f35b","type":"ui_group","z":"","name":"Q3","tab":"fc129880.475208","order":5,"disp":true,"width":"4","collapse":false},{"id":"2916a29a.815e36","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"c0564eb0.fc0d","type":"ui_group","z":"","name":"Q2","tab":"fc129880.475208","order":6,"disp":true,"width":"4","collapse":false},{"id":"54c98c6a.fc0b84","type":"ui_group","z":"","name":"Q4","tab":"fc129880.475208","order":4,"disp":true,"width":"4","collapse":false},{"id":"38b37188.f9d23e","type":"ui_group","z":"","name":"IQ1","tab":"fc129880.475208","order":3,"disp":true,"width":"4","collapse":false},{"id":"fc129880.475208","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]`

here you see the permission:

![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/51efcf0d748e8325128a3dde734722b2cdc732b7.png)

---

<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:** [7 January 2019 11:35 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/6 "2019-01-07T11:35:48Z")

</div>

So you remember wher I wrote:

> [@zenofmud](#):
>
> 1. copy your flow, strip it to the bare minimun that shows the problem and attach it

Is this really a stripped down version? Can anything be removed and the problem still exists?

Also, have you done #6 yet?

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 January 2019 11:40 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/7 "2019-01-07T11:40:17Z")

</div>

> [@zenofmud](#):
>
> Is this really a stripped down version? Can anything be removed and the problem still exists?

Yes it is a stripped down version. The problem still exist. Sometimes the images are displayed after the deplay, but only at 1 of 20 times

no I haven´t done #6 yet, I will try it now

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 January 2019 11:59 UTC](https://discourse.nodered.org/t/visibility-images-via-ui-template/6488/8 "2019-01-07T11:59:13Z")

</div>

![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0ff80c73f66e732f0a20384ff84d2ffd09eb8e00.png)

Thats the errors which appears in the console