Do a hard refresh in HTML-CodePudding

I'm trying to make my webpage do a hard refresh once every 30 seconds or so, but fail to get any result.

This is the code of the webpage. It shows a picture. The picture is replaced once every minute with a new one, in an external process. (The new picture has the same name) I just want to show the latest version.

<html>
<head>
<body>
    <img src="avatar.png" height= 1500>
</body>
</html>

I've tried to add this between head and /head

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
    function autoRefresh() {
        location.reload(true);
    }
    setInterval('autoRefresh()', 5000);
</script>

I've also tried

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>

But non of them works. The webpage refreshes but with the same picture.

If I press Shift F5 in the browser the picture changes.

Anyone have a clue how to do this?

CodePudding user response：

Thank you for all the answers. This made it work:

<html>
<head>
<script>
    function autoRefresh() {
        img1.src = "Avatar.png?="   new Date().getTime();
    }
    setInterval('autoRefresh()', 5000);
</script>
</head>
<body>
    <img src='Avatar.png' id='img1' name='img1'>
</body>
</html>

Just one question? Does this save all the pictures in the cache? Like for every update a new image is saved in the cache? Or does this replace the image in the cache?

CodePudding user response：

You can use <meta> to refresh the page every 30 seconds (HTML Redirections on MDN).

However, to reload without caching you should modify the image URL every time. (e.g. UNIX timestamp as a GET parameter)

Example:

<html>
  <head>
    <!-- 0 is the time **before** the redirect. -->
    <meta http-equiv="Refresh" content="0; URL=https://example.com/" />
  </head>
  <body>
    <img id="image" src=""/>
  </body>
  <script>
  document.GetElementById("image").src = "/image.png?"   new Date().getTime();
  </script>
</html>