无法强制 Web 服务器从磁盘重新加载图像

Question

背景

我的目标是构建一个显示页面幻灯片的 Web 服务器。有些幻灯片可能只是一张图片，而有些幻灯片可能是带有 css 的文本。

安全

没什么花哨的，不会暴露在外面的世界。

界面

用户必须能够修改文本幻灯片中的文本。

用户必须能够修改幻灯片上显示的图像。

图像必须以自动方式更改（网络上的另一台机器创建图像并且应该能够将该图像推送到服务器以进行显示。或者，服务器应该能够下载图像本身，无论哪种方式） .

我有什么

在这个领域知之甚少，我开始阅读和修补。 LAMP 服务器看起来很简单。

我复制了一个slideshow container from w3（我后来意识到，据知识渊博的人说这是一个糟糕的来源），并删除了我不需要的东西。

我创造了：

• 用户输入文本的表单，保存在纯文本文件中（嗯，在我更新 Ubuntu 之前它可以工作，我猜包升级破坏了一些东西，现在表单只显示原始 php 代码。编辑：需要重新启用mods，可能是因为 php 从 5 升级到 7：sudo a2enmod php7.2)。
• 我自己的 html 文本幻灯片，从文件中读取。修改时从文件中读取它很麻烦。我认为txtFile.setRequestHeader('pragma', 'no-cache'); 就是这样做的。
• 带有本地图像的幻灯片

我真正的真正问题

复制新图像代替用作图像幻灯片输入的文件不会更改服务器显示的图像。这似乎是一个普遍的问题，并且在一年中提出了几种解决方案。这些我都没有成功。文件末尾的随机字符串和地址（难以自动化？），这块在我的 index.html 头中：

+    <!-- attempt to reload images on change, does not work: -->
+    <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" />

似乎浏览器，至少是 chrome，在避免缓存方面变得越来越严格。

所以在我的设置（Ubuntu 18.04、LAMP 的 apt 包和最近的 chrome）中，如何让我的服务器在显示幻灯片时从磁盘重新加载图像？

编辑：我不想刷新，服务器应该自动重新加载图像。

另一个可能实际上是罪魁祸首的模糊问题

我做事很奇怪吗？感觉开发这个比它应该做的更麻烦，所以我可能走错了路。你能引导我走向另一个更有意义的方向吗？

Answer 1

您可以通过更改 URL 来强制网络服务器从磁盘重新加载图像。由于您不想经常更改其名称或路径，因此您将为它提供一个 v 参数，例如：

<img src="/images/myimage.png?v=2">

如果你想重新加载它，然后将其更改为

<img src="/images/myimage.png?v=3">

等等。

Answer 2

您正在尝试禁用浏览器缓存。虽然原则上缓存非常简单：浏览器保存加载的资源并在后续请求中从内存中提供它们，但跨浏览器/跨设备禁用它相当复杂。

您可以做的最简单的事情是为您的图像附加一个唯一的参数，以诱使浏览器相信它是不同的：

<img src="/path/to/image.jpg?v=<?php time(); ?>">

这将使您的浏览器始终加载<img>，因为它会认为这是一个新文件。但是，禁用浏览器缓存，尤其是图像缓存会极大地影响性能。

---

更好的方法是为您的图像分配唯一标识符并将它们保存（在数据库中），因此它们的唯一参数仅在文件更改时才会更改。

---

这是一种无需数据库的方法，因为您只需要知道上次替换图像的时间：

• 在您的图片上传处理脚本中，上传成功后，还将当前时间戳写入服务器上的文件中（即：timestamp.txt）。
• 在您的标记中，使用此文件的内容来标记您的图像：
  <img src="path/to/file.jpg?v=<?= file_get_contents('./timestamp.txt'); ?>">
• 每隔几秒进行一次读取timestamp.txt 的ajax 调用。当timestamp.txt 的内容与src 的v 参数不同时，将src 值替换为新的时间戳，导致浏览器立即重新加载文件。
  注意： ajax 本身将被缓存，除非您确保它不会被缓存：
  'timestamp.txt?v=' + new Date().getTime()