防止在网页上缓存图片

Question

我正在使用IHttpHandler在网页上显示存储在azure blob中的图像。这工作正常。我也给了用户旋转图像的能力。旋转图像的代码正在工作。然而，当我再尝试显示旋转的图像给用户：在网页上显示

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

图像不更新，虽然储存在“blobFileName”的形象已经改变。一些试验和错误之后，我发现，如果我存储在一个新的文件名旋转的斑点，说“blobFileNameRotated”代码：

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

作品和显示旋转文件。我认为原始代码不起作用，因为图像已被浏览器缓存？我尝试在几个浏览器中运行代码，发现在Chrome中原始代码可以工作，但只适用于小文件，而且在IE11中完全不起作用。

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

Answer 1

不是一个真正的Azure的问题，当然也有一些尝试：

1. 你可以缓存克星添加到您的图像处理程序的网址。我建议在最后添加一个随机数字，以强制浏览器重新请求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. 请务必设置在投手的C＃代码正确的缓存头。见Caching ASHX Image Response

Answer 2

对不起，这个响应速度慢，我的解决办法之类的工作，所以我刚刚得到全面检验出西蒙的更好的解决方案。我想我会添加一些其他我一路上发现的事情，以防其他人来这个问题寻找有关斑点和图像的信息。

我的解决方案涉及每次旋转它时更改文件的名称。这意味着我为每个90度旋转存储一个新的blob。这工作，但西蒙的解决方案只涉及改变对图像处理程序的调用，所以blob文件名不需要改变。

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

注意，如果要复制从正在旋转它的BLOB内容类型是不可用您已经执行后：斑点已被下载

但经过

Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName) 

只：

blob.DownloadToByteArray(byteData, 0) 

这又让我在另一次绊倒了我，因为我认为找到了一个blob，因为我没有在dim blob as代码行上得到一个错误，实际上它找不到，因为我通过了错误的容器名称。

快乐blobbing。