How to stop browser caching images?

Soldato
Joined
18 Oct 2002
Posts
10,869
Location
Bristol
I have a weather station, connected to a Raspberry Pi, every 5 minutes it generates new html and images/graphs and FTPs them to my website.

This all works well, the correct files are generated and uploaded. However, Chrome, when refreshing the page picks up all the numbers (in the HTML) but doesn't refresh the images. If I go into Developer Tools and do a Hard Refresh, it reloads everything fine.

Is there anything I can add to the HTML to stop it caching the images, force a reload each time?

I've tried adding this to the head:
HTML:
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>


And this to the IMG tag: class="NO-CACHE"

But no luck, anyone know how to get this to work?
 
Caporegime
Joined
9 Aug 2008
Posts
30,727
Location
127.0.0.1
You could disable cache in Google Chrome:

When you're in Google Chrome, click on View, then select Developer, then Developer Tools. Alternatively, you can right click on a page in Chrome, then click Inspect. Click on the Network tab, then check the box to Disable cache. You can then close out of Developer Tools (This only works when dev tools are open)

or this might work, it's a time stamp cache:

Code:
<meta http-equiv="expires" content="timestamp">


and then also maybe try putting a refresh tag in the page. Something like this;

Code:
<meta http-equiv="refresh" content="10" >


or

Code:
<?php
$page = $_SERVER['PHP_SELF'];
$sec = "10";
?>
<html>
    <head>
    <meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
    </head>
    <body>
    <?php
        echo "Watch the page reload itself in 10 second!";
    ?>
    </body>
</html>
 
Last edited:
Associate
Joined
10 Nov 2013
Posts
1,701
Not necessarily the best solution, but if you can generate the images with a timestamp in the filename each time you generate some new html that would work too.
 
Soldato
OP
Joined
18 Oct 2002
Posts
10,869
Location
Bristol
Some strangeness, when I load the page directly from the local Raspberry Pi, it works. Always refreshes the latest images. But then I load the page from my web site, exactly the same files just FTPed moments after generation, it sticks with the old cached version.

So what, specifically is the difference between a regular refresh and a hard reload, looks like there's something to do with the server or how the files are copied over that might be the problem.
 
Associate
Joined
3 Jun 2005
Posts
2,193
Location
The South
...looks like there's something to do with the server..

I suspect additional "caching" related headers are getting applied by your web server and you can use Developer Tools to easily see what headers are being served for your weather image(s).

As @planty mentions, one of the easiest, and no doubt dirtiest, methods is just to add a timestamp (updates on page reload) to the filename when calling the image, eg - weather.jpg?1610991058.
Which you can do either by using a server-side language (PHP) or, bodge it (as it reloads images), by using JS (i'd make the selector specific to the images you need to update) -
Code:
var _timestamp = new Date().getTime();
document.querySelectorAll('img').forEach(selImage => {
  selImage.src = selImage.src + '?' + _timestamp;
});
 
Top Bottom