防止在网页上缓存图像答案

【问题标题】：Prevent caching of Images on webpage防止在网页上缓存图像
【发布时间】：2014-03-01 17:52:01
【问题描述】：

我正在使用 IHttpHandler 在网页上显示存储在 azure blob 中的图像。这工作正常。我还让用户能够旋转图像。旋转图像的代码正在运行。但是，当我尝试向用户显示旋转后的图像时：

document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileName;

尽管存储在“blobFileName”中的图像已更改，但页面上显示的图像并未更新。经过反复试验，我发现如果我将旋转的 blob 存储在一个新的文件名下，请说出“blobFileNameRotated”代码：

document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileNameRotated;

工作并显示旋转的文件。我假设原始代码不起作用，因为图像已被浏览器缓存？我尝试在几个浏览器中运行代码，发现在 Chrome 中原始代码有效，但仅适用于小文件，而在 IE11 中根本不起作用。

我的问题是如何控制浏览器缓存图像文件的方式（如果这是问题）并强制浏览器重新显示图像，即使我没有更改文件名。我尝试将 src 设置为不同的文件，然后返回到 blob 文件，但没有奏效。

【问题讨论】：

【解决方案1】：

不是真正的 Azure 问题，但可以尝试一些事情：

您可以在您的图像处理程序 URL 中添加一个缓存破坏器。我建议只在末尾附加一个随机数以强制浏览器重新请求 URL。问题是永远不会缓存图像。示例：

document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&m=" + Date.now();
使用相同的方法，但输出要显示的图像数量并将 Date.now() 更改为图像名称/ID，以便我们在您旋转时最终获得应缓存的相同图像。

// output using some server-side logic.

var imageIds = new Array("ImageA","ImageB","ImageC");

// in an eventHander have similar to:

document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=" + imageIds[currentImage]
确保在处理程序的 C# 代码中设置正确的缓存标头。见Caching ASHX Image Response

【讨论】：

【解决方案2】：

抱歉，对此反应缓慢，我的解决方案有点奏效，所以我才刚刚开始测试 Simon 的更好解决方案。我想我会添加一些我在此过程中发现的其他内容，以防其他人来此问题寻找有关 blob 和图像的信息。

我的解决方案涉及在每次旋转文件时更改文件的名称。这意味着我为每个 90 度旋转存储了一个新的 blob。这可行，但 Simon 的解决方案只涉及更改对图像处理程序的调用，因此不需要更改 blob 文件名。

我最初遇到了问题，因为我在旋转 blob 后没有设置它的内容类型。然后，当我尝试在报告中使用该图像时，代码抱怨，因为它不是图像类型。

请注意，如果您想从正在旋转的 blob 中复制内容类型，则在执行后将不可用：

    Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName)

但仅在 blob 下载后：

    blob.DownloadToByteArray(byteData, 0)

这在另一个时候也让我绊倒了，因为我认为已经找到了一个 blob，因为我在 dim blob as 代码行上没有收到错误，而实际上找不到它是因为我' d 传入了错误的容器名称。

快乐滴。

【讨论】：