How to force image refresh on every panel load/refresh

[arminus]

Great plugin, but I have one problem.

I'm embedding an image from an external server which changes every 15 minutes. My problem is that the image is loaded from the browser cache until I Ctrl+F5 load the entire panel page.

I already tried the usual trick to append a timestamp to the image's URL, but this doesn't work:

<img id="myimage" src="plain/url/image.png">

Then in either onRender or inInit:

var image = document.getElementById('myimage');
var currentTime = new Date().getTime();
image.src = 'plain/url/image.png?timestamp=' + currentTime;

both show a TypeError: image is null

Add the 3 lines JS in a <script> block in the HTML markup doesn't do anything.

Any ideas how to solve this?

[ZuperZee]

You are using document.getElementById, which is usually not what you want. To get elements in the panel, you should use the htmlNode instead of document.

Example

Code used to serve the image: https://github.com/ZuperZee/serve-refresh-images

HTML

<img id="myimage" src="plain/url/image.png">

onInit

const image = htmlNode.querySelector("img");
const currentTime = new Date().getTime();
image.src = "http://localhost:3000?timestamp=" + currentTime;

Panel options (https://gapit-htmlgraphics-panel.gapit.io/docs/guides/how-to-import-export/)

{
    "calcsMutation": "standard",
    "reduceOptions": {
        "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
        ]
    },
    "add100Percentage": true,
    "centerAlignContent": true,
    "overflow": "visible",
    "useGrafanaScrollbar": true,
    "SVGBaseFix": true,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "* {\n  font-family: Open Sans;\n}\n",
    "html": "<img id=\"myimage\" src=\"plain/url/image.png\">\n",
    "renderOnMount": true,
    "onRender": "const image = htmlNode.querySelector(\"img\");\nconst currentTime = new Date().getTime();\nimage.src = \"http://localhost:3000?timestamp=\" + currentTime;\n",
    "panelupdateOnMount": true,
    "dynamicHtmlGraphics": false,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "onInitOnResize": false,
    "onInit": ""
}

[arminus]

Perfect, thanks a lot!