防止图像文件被添加到浏览器缓存

Posted 2023-03-28

【中文标题】防止图像文件被添加到浏览器缓存

【英文标题】：Preventing image files being added to browser cache

【发布时间】：2020-11-16 18:22:34

【问题描述】：

我的应用程序将图像文件呈现给用户（用于摄影比赛评审）。它可能会在单个会话期间呈现数千个相当大的文件。 为了呈现每张图片，我使用 AJAX 通过网络服务获取一个 URL，然后将其显示为

$("#imgImage").prop('src', resp.URL);

我担心用户浏览器中的存储空间使用情况。是否将每个图像添加到缓存中，如果是，我该如何防止它？ 我有元指令

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Expires" content="-1" />

但由于页面本身不是每次都重新加载，我不确定它们是否有效。

【参考方案1】：

您需要让服务器将这些标头与提供 图像 的 HTTP 响应一起发送。在您的页面中，它们仅适用于您的页面，而不适用于图像。

请注意，如果您的页面再次显示相同的图像（用户可以返回吗？我希望能够），客户端将不得不重新下载它。如果它很大，或者它们在计量连接上，那可能并不理想。

【讨论】：

谢谢，但图像不是作为 HTTP 响应出现的 - URL 是通过 Web 服务获取的，我更改了 DOM 中的 src 属性

@ilens - 正确 - 设置 src 会触发 HTTP 请求，并且您会为缓存标头提供对该请求的响应。唯一的例外是它是 data:// 或 file:// URL。如果它是data:// URL，则数据在 URL in 中，因此缓存标头不相关。如果是file:// URL，我不得不承认我不知道浏览器是否缓存了这些（我希望不会，这没有意义），但你也不能在这些上设置任何缓存标头。

@ilens - 没关系。

@ilens - 再次使用与页面相同的方案（http: 或https:，大概）触发对服务器的请求，这将涉及响应，这就是您设置响应标头。

对不起，我在这里遗漏了一些东西......我的服务器端代码没有被调用，所以我可以设置响应头吗？