如何在ASP.NET MVC与jQuery Ajax环境下阻止Chrome缓存图片？

你已经把Ajax请求的缓存控制做得很细致了，但问题的核心在于图片是独立的静态资源，浏览器对它们的缓存规则和Ajax请求完全分开——之前的设置只影响了JSON数据的缓存，并没有控制图片资源本身的缓存。下面给你几个彻底解决的方案：

1. 给图片URL添加版本/唯一标识参数 #

这是最常用且高效的方法，通过在图片路径后追加唯一参数（比如文件修改时间、版本号），让浏览器认为这是全新资源，从而重新请求。

两种实现思路： #

• 后端生成带版本的路径：在ViewModel里生成图片路径时，读取图片文件的最后修改时间，把它作为参数追加到路径后。只有当图片真的被修改时，参数才会变化，既避免不必要的重复请求，又能确保加载新图：

  // 示例：获取图片文件的修改时间作为版本号
  var imgServerPath = Server.MapPath(imgPath);
  var fileInfo = new FileInfo(imgServerPath);
  var version = fileInfo.LastWriteTime.Ticks.ToString();
  var imageUrl = $"{imgPath}?v={version}";
  

• 前端动态追加参数：如果后端修改不便，也可以在前端处理图片路径时追加时间戳（缺点是每次页面刷新都会重新请求图片，可能影响性能）：

  function UpdatePage(response) {
    // 遍历图片数组，更新每个幻灯片图片的src
    response.images.forEach((imgPath, idx) => {
      const slideImg = document.querySelector(`.slide-item:nth-child(${idx+1}) img`);
      // 追加当前时间戳作为唯一参数
      slideImg.src = `${imgPath}?t=${Date.now()}`;
    });
  }
  

2. 服务器端配置静态资源缓存规则 #

直接在web.config中设置图片所在目录的缓存策略，强制浏览器不缓存这些资源：

在项目根目录的web.config里添加以下配置，针对QWData目录下的所有资源禁用缓存：

<location path="QWData">
  <system.webServer>
    <staticContent>
      <!-- 直接禁用客户端缓存 -->
      <clientCache cacheControlMode="DisableCache" />
      <!-- 也可以设置极短的过期时间，比如1分钟 -->
      <!-- <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:01:00" /> -->
    </staticContent>
  </system.webServer>
</location>

这样服务器返回图片时，会带上Cache-Control: no-cache的响应头，明确告诉浏览器不要缓存这些文件。

3. 修改图片文件名（适合自动化场景） #

如果你的图片更新有自动化流程，可以每次更新图片时重命名文件（比如Folie1.JPG改成Folie1_v2.JPG），这样图片URL本身发生变化，浏览器一定会请求新资源。这种方法适合有文件管理系统或自动生成图片的场景。

为什么之前的方法没生效？ #

你之前设置的OutputCache和响应头，都是针对Refresh_PLC_Data这个Ajax接口的响应，只会让浏览器不缓存JSON数据。但图片是浏览器单独发起请求的静态资源，这些缓存控制对图片请求完全没有作用——所以即使JSON返回了新的图片路径，浏览器还是会从本地缓存读取旧图。

内容的提问来源于stack exchange，提问作者Osti