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

Question

背景

我的目标是构建一个显示页面幻灯片的网络服务器。一些幻灯片可能只是一张图片，其他一些带有 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

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

你能做的最简单的事情就是给你的图像附加一个唯一的参数，让浏览器相信它是不同的:

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

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

---

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

---

这是一种无需数据库即可完成此操作的方法，因为您只需要知道上次替换图像的时间:

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