防止在网页上缓存图像

Question

我正在使用IHttpHandler来显示存储在网页上的天蓝色斑点中的图像。这很好用。我还让用户能够旋转图像。旋转图像的代码正常工作。然而，当我尝试向用户显示旋转的图像时：

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

虽然存储在＆lt; blobFileName＆＃39;的图像中，但页面上显示的图像不会更新。已经变了。经过一些试验和错误后，我发现如果我将旋转的blob存储在新的文件名下，请说“blobFileNameRotated”＆＃39;代码：

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

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

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

Answer 1

不是Azure问题，只是尝试一些事项：

1. 您可以在Image Handler URL中添加缓存破坏程序。我建议只在末尾添加一个随机数，以强制浏览器重新请求URL。问题是没有图像会被缓存。例如：

   document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&m=" + Date.now();

2. 使用相同的方法但输出要显示的图像数量，并将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]

3. 确保在hander的C＃代码中设置正确的缓存标头。请参阅Caching ASHX Image Response

Answer 2

很抱歉对此反应迟钝，我的解决方案很有效，所以我只是试着测试Simon的更好的解决方案。我想我会添加一些我在路上发现的其他东西，以防其他人来这个问题寻找有关blob和图像的信息。

我的解决方案涉及每次旋转文件时更改文件的名称。这意味着我为每个90度旋转存储了一个新blob。这有效，但Simon的解决方案只涉及更改对imagehandler的调用，因此blob文件名不需要更改。

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

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

    Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName)

但仅在下载blob之后：

    blob.DownloadToByteArray(byteData, 0)

这也让我在另一个时间绊倒了，因为我认为找到了一个blob，因为我没有在dim blob as代码行上出现错误，实际上它找不到因为我传递了错误的容器名称。

快乐的蠢事。