How to stop browser caching images?

clv101 · 15 Jan 2021 at 23:16

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?

Deleted member 77746 · 16 Jan 2021 at 10:01

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>

planty · 16 Jan 2021 at 12:03

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.

clv101 · 18 Jan 2021 at 00:03

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.

visibleman · 18 Jan 2021 at 17:54

clv101 said:
...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;
});