时间戳

Question

我有一个程序可以将.png文件保存在某个文件夹中，它所拍摄的图像始终具有相同的名称，因此每次删除旧图片并将其替换为新图片时。我希望我的网站显示它们创建时的图像，问题是该网站仅显示第一个图像，而不“刷新”该网站，因此我总是看到相同的图像。

用于保存图片的程序是用Python编写的，图像名称为image_request.png，我尝试在文件名的末尾添加时间，但没有成功，我还尝试添加相同的sleep函数结果...

这是HTML + js代码：

<div class="row">
<div class="side">
<h2>Live camera:</h2>
<img id='img' style="height:150; width:300;" src="/static/image_request.png" onload="updateImg()">

<script type="text/javascript">
  function updateImg() {
  newImage = document.getElementById('img')
  while(true) {
  newImage.src = "/static/image_request.png"
  console.log('done')
  }
}
</script>
</div>
</div>

如果我运行它，我会看到一张图片，整个网站都会冻结...

Answer 1

这里有两个直接的问题：

您正尝试以相同的URL重新请求图片，而不会提示重新加载。
您正在使用while(true)循环，没有退出条件。

如果您提供的代码没有冻结您的网站，我会感到惊讶。 while(true)循环每秒将运行数千次。在30秒内，浏览器将窒息并使标签页崩溃或完全锁定浏览器。

您更有可能寻找某种缓存清除机制，而不是while循环。

时间戳

解决此问题的最简单方法是，将Web浏览器设置为以静态URL投放图片，然后使用当前时间戳（作为查询参数）附加到客户端，以更新客户端上的URL。例如，

const elem = document.getElementById('img');
const url = "/static/image_request.png";
setInterval(function(){
    // e.g., static/image_request.png?r=1566576298288
    elem.setAttribute('src', `${url}?r=${new Date().getTime()}`);
}, 10000);

使用此代码，浏览器将每隔十秒钟在URL末尾更新一个新时间戳。这应该提示图像重新加载。如果服务器设置正确，查询参数将不会影响文件的查找位置，并且应返回静态URL的内容。

顺便说一句，您实际上不应该经常执行此操作，因为它可能会导致图像在加载时短暂消失。不过，对于定期刷新，它应该可以正常工作。

Websockets

您可能会发现上述解决方案完全可以满足您的需求，但我确实想简要阐述一个更好的，但涉及更多的解决方案。

您可以使用WebSockets在客户端和服务器之间打开持久连接，而不必对图像路径进行硬编码。每次服务器上的映像更改时，它都可以通过套接字连接将映像的编码内容广播给所有客户端。

当客户端从服务器接收到套接字消息时，它可以直接使用编码后的内容更新图像的URL，而无需向服务器提出另一个请求。

此方法将使您不必处理重新加载一个持久性文件路径的麻烦，而且还消除了重新加载图像时的任何闪烁或消失。此方法还可以让您从使用img标记切换到canvas，根据您的实际需求可能会更好。

如何在不刷新页面的情况下更新网站上的图片？

1 个答案:

时间戳

Websockets