# Image in UI template not updating

**URL:** <https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377>\
**Category:** Dashboard\
**Created:** [20 March 2020 21:58 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377 "2020-03-20T21:58:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [20 March 2020 21:58 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/1 "2020-03-20T21:58:28Z")

</div>

In the UI template, I have this:

`<img style="height:95px; width:95px;" src="{{msg.payload.coverart}}"/></div>`

The image displayed at this URL ([http://blah/coverart.jpg](http://blah/coverart.jpg)) changes when I change tracks on the music player however the URL doesn't change.

If I refresh a browser page pointing to [http://blah/coverart.jpg](http://blah/coverart.jpg), the image does indeed refresh.

How do I get the image to change in dashboard?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 March 2020 12:51 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/2 "2020-03-21T12:51:49Z")

</div>

Can you post a bit more of your flow?  
Something to test with.

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [21 March 2020 13:26 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/3 "2020-03-21T13:26:57Z")

</div>

have you tried forcing the ui tab to reload with an ui control node? This will refresh the current tab:

```auto
[{"id":"66062f5d.7e298","type":"inject","z":"909b8ee5.d1219","name":"","topic":"","payload":"{\"tab\":\"\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":900,"wires":[["844f197.1168868"]]},{"id":"844f197.1168868","type":"ui_ui_control","z":"909b8ee5.d1219","name":"","events":"all","x":340,"y":900,"wires":[[]]}]

```

Your dashboard only loads the picture once when loading and will not know byitself when the picture at the url will have changed.  
best regards Johannes

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [21 March 2020 18:32 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/4 "2020-03-21T18:32:44Z")

</div>

> [@JGKK](#):
>
> have you tried forcing the ui tab to reload with an ui control node?

Thanks for replying. I tried your two nodes above, as standalone nodes (not connected to anything else), and it doesn't work. It reloads the page okay, but the image is still the old one.

> [@edje11](#):
>
> Can you post a bit more of your flow?  
> Something to test with.

Here's my flow. In the function node, you'll see I have set msg.payload.coverart explicitly (rather than fetching it from global context).

```auto
[{"id":"445633.a4b079cc","type":"ui_template","z":"fe3cc4b6.fad208","group":"74f88df7.9c3154","name":"","order":2,"width":0,"height":0,"format":"<!-- Be aware that element styling may work on one Dashboard page but not another. So look at the\n other UI templates on the page where it works, and ensure CSS is copied over to this one.\n Right now, there's no CSS and it works... -->\n\n<style>\n .art {grid-area: art;}\n .player {grid-area: player;}\n .title {grid-area: title;}\n .artist {grid-area: artist;}\n .album {grid-area: album;}\n\n .player-container {\n display:grid;\n grid-template-areas:\n 'art title title title title'\n 'art artist artist artist artist'\n 'art album album album album'\n 'art player player player player';\n grid-gap:2px;\n }\n \n .player-container > div {\n background-color:#444;\n }\n\n</style>\n\n<div class=\"player-container\">\n <div class=\"art\"><img style=\"height:95px; width:95px;\" src=\"{{msg.payload.coverart}}\"/></div>\n <div class=\"player\">{{msg.payload.name}}</div>\n <div class=\"title\">{{msg.payload.title}}</div>\n <div class=\"artist\">{{msg.payload.artist}}</div>\n <div class=\"album\">{{msg.payload.album}}</div>\n \n \n</div>\n\n\n\n<div style=\"\">vol: {{msg.payload.mixer_volume}}</div>\n<div>play: {{msg.payload.mode}}</div>\n<div>{{msg.payload.playerid}}</div>\n<div></div>\n\n<!-- <div ng-if=\"msg.hasscenes == false\" class=\"noscene\">No scenes created yet. Please save your first scene.</div> -->\n<div class=\"button-container\">\n <md-button style=\"\" ng-click=\"send({action: 'prev'})\" >Prev</md-button>\n <md-button style=\"\" ng-click=\"send({action: 'playpause'})\" >Play / Pause</md-button>\n <md-button style=\"\" ng-click=\"send({action: 'next'})\" >Next</md-button>\n</div>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":720,"y":1640,"wires":[[]]},{"id":"ffeb857e.f118a8","type":"function","z":"fe3cc4b6.fad208","name":"Get Player","func":"// get player object\nmsg.payload = global.get(\"home.squeeze.players.\" + msg.playerid)\nmsg.payload.coverart = \"http://192.168.0.13:9000/music/current/cover.jpg?player=00:04:20:17:df:db\"\nreturn msg;\n","outputs":1,"noerr":0,"x":530,"y":1640,"wires":[["445633.a4b079cc","321d6802.0dcb08"]]},{"id":"2450319.88dc2ce","type":"change","z":"fe3cc4b6.fad208","name":"","rules":[{"t":"set","p":"playerid","pt":"msg","to":"Living_Room_Duet","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":1640,"wires":[["ffeb857e.f118a8"]]},{"id":"d26bb0af.5941f","type":"inject","z":"fe3cc4b6.fad208","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":200,"y":1640,"wires":[["2450319.88dc2ce"]]},{"id":"74f88df7.9c3154","type":"ui_group","z":"","name":"Audio Visual","tab":"8cd9325b.caa1a","order":3,"disp":true,"width":"6","collapse":false},{"id":"8cd9325b.caa1a","type":"ui_tab","z":"","name":"Living Room","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

I guess it may be possible to test this by switching over an image on a webserver by copying a file over another file. You'd need to remove the first line of the function node, and some of the UI template placeholders but I think this would be possible to test. Thanks!

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [21 March 2020 18:37 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/5 "2020-03-21T18:37:52Z")

</div>

More testing: I have cleared chrome browser cache, and when I reload the page it works.

So maybe it's cache related?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 March 2020 22:17 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/6 "2020-03-21T22:17:59Z")

</div>

Rather than use ui\_control - you need to push the binary image into the page - eg see this example (using a Pi webcam picture) -  
[https://flows.nodered.org/flow/2b6c2f0d7a316f1a6831782d33a0d40c](https://flows.nodered.org/flow/2b6c2f0d7a316f1a6831782d33a0d40c)

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 March 2020 22:18 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/7 "2020-03-21T22:18:32Z")

</div>

I had something similar, can't recall the problem exactly, but is was with an ui\_template and not loading backcolor incorrect.  
The problem was with the message id, there where 2 messages with the same id or something like that.  
Simple cloning the message in a function node just before the ui\_template solved the problem for me.

```auto
var clonedMessage = RED.util.cloneMessage(msg);
msg={}; //clone the message to get rid of the double _msgid
return clonedMessage;

```

Give it a try, maybe it helps

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [22 March 2020 01:14 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/8 "2020-03-22T01:14:51Z")

</div>

Thanks for those suggestions. I tried @edje11's suggestions but still didn't refresh. Finally after faffing for a while with the HTTP request and base64 node (leading on from @dceejay's idea) I got it working.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 April 2020 01:14 UTC](https://discourse.nodered.org/t/image-in-ui-template-not-updating/23377/9 "2020-04-05T01:14:53Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.