How to use jcon data as a variable in UI template

I need to use a jcon value to insert to a url of a image.
for example, I need to use the result of the payload "msg.dayicon" and inset to the url to display the image.
If msg.dayicon is 50, then the URL will be: https://www.hko.gov.hk/images/HKOWxIconOutline/pic50.png

If msg.dayicon is 60, then the URL will be: https://www.hko.gov.hk/images/HKOWxIconOutline/pic60.png

How can I do this in Dashboard UI template node.

<div id="weekday3_icon"></div>
<script>

var radial1;
    (function(scope){ 
        scope.$watch('msg', function(msg) {
            var day3_icon = msg.dayicon;
        });
        });
    })(scope);
    
document.getElementById('weekday3_icon').innerHTML = '<img src="https://www.hko.gov.hk/images/HKOWxIconOutline/pic' + day3_icon + '.png" style="width:50px;height:50px;"/>';
    
    
    
</script>

<script type="text/javascript">
document.getElementById('weekday3_icon').innerHTML = '<img src="https://www.hko.gov.hk/images/HKOWxIconOutline/pic' + day3_icon + '.png" style="width:50px;height:50px;"/>';
</script>

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