javascript - 防止在网页上缓存图像

Question

我正在使用 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 文件，但这不起作用。

Answer 1

这并不是一个真正的 Azure 问题，而是一些需要尝试的事情:

1. 您可以将缓存破坏程序添加到图像处理程序 URL。我建议在末尾附加一个随机数，以强制浏览器重新请求 URL。问题是不会缓存任何图像。示例:

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

2. 使用相同的方法，但输出要显示的图像数量，并将 Date.now() 更改为图像名称/ID，以便我们在旋转时最终会获得应缓存的相同图像。

   //使用一些服务器端逻辑进行输出。

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

   //在eventHander中有类似:

   document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID="+ imageIds[currentImage]

3. 确保在处理程序的 C# 代码中设置正确的缓存 header 。请参阅Caching ASHX Image Response