# Show image through UI\_Template node

**URL:** <https://discourse.nodered.org/t/show-image-through-ui-template-node/37846>\
**Category:** Dashboard\
**Created:** [21 December 2020 14:42 UTC](https://discourse.nodered.org/t/show-image-through-ui-template-node/37846 "2020-12-21T14:42:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kostasgioko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kostasgioko/32/34061_2.png) [@kostasgioko](https://discourse.nodered.org/u/kostasgioko)\
**Post date:** [21 December 2020 14:42 UTC](https://discourse.nodered.org/t/show-image-through-ui-template-node/37846/1 "2020-12-21T14:42:13Z")

</div>

Hello. I am trying to show an image in the browser that updates frequently. In order to avoid the flicker from loading the image too much, I am using some Javascript which seems to do the trick. The thing is, if I load the HTML into a browser it works just fine, but when I try to load it through the Dashboard the image isn't loaded. Here is the HTML file:

```auto
<html>
<head>
<script type="text/JavaScript">
var url = "url"; //url to load image from
var refreshInterval = 100; //in ms
var drawDate = true; //draw date string
var img;

function init() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    img = new Image();
    img.onload = function() {
        canvas.setAttribute("width", img.width)
        canvas.setAttribute("height", img.height)
        context.drawImage(this, 0, 0);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var maxWidth = 100;
            var x = img.width-10-maxWidth;
            var y = img.height-10;
            context.strokeStyle = 'black';
            context.lineWidth = 2;
            context.strokeText(text, x, y, maxWidth);
            context.fillStyle = 'white';
            context.fillText(text, x, y, maxWidth);
        }
    };
    refresh();
}
function refresh()
{
    img.src = url + "?t=" + new Date().getTime();
    setTimeout("refresh()",refreshInterval);
}

</script>
<title>JavaScript Refresh Example</title>
</head>

<body onload="JavaScript:init();">
<canvas id="canvas"></canvas>
</body>
</html>

```

I just put this into a Dashboard ui\_template node. Any ideas on what I am doing wrong?

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [21 December 2020 15:26 UTC](https://discourse.nodered.org/t/show-image-through-ui-template-node/37846/2 "2020-12-21T15:26:56Z")

</div>

Welcome! I suspect that the JS and other tags you have defined inside the `<head>` tags are being ignored. Since the NR Dashboard uses Angular v1, it places the body of your `ui_template` node into that section of the dashboard page -- including a bunch of html header elements would not normally be valid html structure.

However, you can place your refresh() function and external script library tags inside another `ui_template`, and select the 'Added to the header section' checkbox -- this causes the dashboard page to include it for all of your dashboard templates to use.

---

<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:** [20 January 2021 15:27 UTC](https://discourse.nodered.org/t/show-image-through-ui-template-node/37846/3 "2021-01-20T15:27:06Z")

</div>

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