防止在网页上缓存图像

Question

我正在使用IHttpHandler在网页上显示存储在蔚蓝斑点中的图像。 这很好。 我还为用户提供了旋转图像的功能。 旋转图像的代码正在运行。 但是，当我尝试向用户显示旋转的图像时：

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文件，但这没有用。

Answer 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＃代码中设置正确的缓存头。 请参阅缓存ASHX图像响应

Answer 2

抱歉，响应速度很慢，我的解决方案无法正常工作，因此我只想测试Simon的更好解决方案。 我以为我会添加一些我在此过程中发现的其他信息，以防其他人遇到此问题以寻找有关斑点和图像的信息。

我的解决方案涉及每次旋转文件时更改文件名。 这意味着我每旋转90度就会存储一个新的blob。 这行得通，但是Simon的解决方案仅涉及更改对imagehandler的调用，因此不需要更改blob文件名。

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

请注意，如果要从旋转的Blob复制内容类型，执行后将不可用：

    Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName)

但仅在下载了Blob之后：

    blob.DownloadToByteArray(byteData, 0)

这也使我不胜其烦，因为我以为我发现了一个Blob，因为我没有在dim blob as代码行出现错误，而实际上却因为我传入而找不到了错误的容器名称。

快乐的吹嘘。