How to properly refresh a page to display an image

Question

this should be very easy but I have been fighting for a week without any success and therefore I'm asking for your kind help. What I want to achieve is very simple.

I have a very simple, pure HTML, page (code below) that is to show two images.
The images are uploaded to the same directory via FTP
The page refreshes itself every 10 seconds, such that if the images have changed during the interval they should be updated in the view accordingly

Everything works as expected when I run it on my computer but it doesn't when I run it from the server. I can see the browser is indeed refreshing the page but the images do not change even though they were updated on the folder. Moreover, if I close the browser and open the page again then the new images are properly shown.

What am I missing? Many thanks in advance for your help

<!DOCTYPE HTML>
<html>
   <head>
      <title>RePlay</title>
      <meta http-equiv="refresh" content="10">
   </head>
   <body id = "body" style = "text-align:center;">
      <h1 style = "color:green;" >
         RePlay
      </h1>
      <h2 style = "color:black;" >
      Courts Live Update
      </h1>
      <img src="Image1.png" align = "left" width="500" height="333">
      <img src="Image2.png" align = "right" width="500" height="333">
   </body>
</html>

Maybe you can check at Amit Joki's answer here https://stackoverflow.com/a/22766914/8984764 — Regn, Apr 05 '22 at 14:51

score 1 · Accepted Answer · answered Apr 05 '22 at 14:59

I think this could be a cache issue. Even though the images are different after refresh, the browser is showing the previously cached images since the file name is the same. Perhaps try adding a query parameter to the end of the image src to bypass the browsers caching functionality for images with the same src. Try writing it like this and see if it works:

<!DOCTYPE HTML>
<html>

<head>
   <title>RePlay</title>   
   <meta http-equiv="refresh" content="10">
</head>

<body id = "body" style = "text-align:center;">
   
   <h1 style = "color:green;" >
       RePlay
   </h1>

   <h2 style = "color:black;" >
       Courts Live Update
   </h1>
   

   <img id="img-1" src="Image1.png" align = "left" width="500" height="333">
   <img id="img-2" src="Image2.png" align = "right" width="500" height="333">

</body>
<script>
 let img1 = document.getElementById('img-1');
 let img2 = document.getElementById('img-2');

 img1.src = 'Image1.png?t=' + new Date().getTime();
 img2.src = 'Image2.png?t=' + new Date().getTime();
</script>
</html>

In this example, I'm adding the datetime to a query parameter to ensure a new pathname for the image each refresh. That way the browser won't try to cache the image since the src will be different each time.

many thanks for your suggestion. It definitely works better than mine but still it takes like three refreshes (some times less some times more) to actually update the picture. I wonder if there are other alternatives to accomplish my goal... — Simon Schvartzman, Apr 05 '22 at 15:32
@SimonSchvartzman It's no problem, maybe try looking into this issue by looking into this as a cache issue - you'll probably get more relevant answers. Check this out and see if any of these suggestions work properly: https://stackoverflow.com/a/22429796/10719637 — Jeith, Apr 05 '22 at 15:43
Awesome, this is working for me just fine. I have an ASP.NET Core 6 application hosted by Azure, and it's using images stored in an Azure Storage container. This solution fixed my problem with images refreshing after uploading new ones with the same file name. — CaptainGenesisX, Sep 22 '22 at 16:20

How to properly refresh a page to display an image

1 Answers1