如何正确刷新页面以显示图像

Question

这应该很容易，但我已经战斗了一个星期没有任何成功，因此我请求你的帮助。我想实现的很简单。

我有一个非常简单、纯粹的 HTML 页面（代码如下），用于显示两个图像。
图片通过FTP
上传到同一目录
页面每 10 秒刷新一次，这样如果图像在间隔期间发生了变化，它们应该相应地在视图中更新

当我在我的计算机上运行时，一切都按预期工作，但当我从服务器运行时，它却没有。我可以看到浏览器确实在刷新页面，但图像不会改变，即使它们已在文件夹中更新。此外，如果我关闭浏览器并再次打开页面，新图像就会正确显示。

我错过了什么？非常感谢您的帮助

<!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>

Answer 1

我认为这可能是缓存问题。尽管刷新后图像不同，但浏览器显示的是之前缓存的图像，因为文件名相同。也许尝试在图像 src 的末尾添加一个查询参数，以绕过浏览器对具有相同 src 的图像的缓存功能。试试这样写，看看是否可行：

<!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>

在此示例中，我将日期时间添加到查询参数以确保每次刷新图像的新路径名。这样浏览器就不会尝试缓存图像，因为每次 src 都会不同。

如何正确刷新页面以显示图像

How to properly refresh a page to display an image

html

refresh

image