5

我有一个 Angular 应用程序，它显示人员配置文件图像（从服务器加载）并且可以选择更改它。

当应用程序第一次加载时，图像会正确显示。我调用 Web 服务来更改服务器上的图像。问题是即使在远程服务器上更改图像后，即使刷新页面，浏览器上的图像也没有反映更改。

我尝试使用元标记来禁用缓存，但它对我不起作用。

只有在我删除浏览器缓存后，浏览器上的图像才会发生变化。我该如何解决这个问题？

基于评论的示例流程：

  1. 初始路径：http://server_path/image_name.jpg
  2. 调用网络服务并更改图像（注意：图像的路径不会改变。只有图像本身被替换）
  3. 刷新浏览器页面

问题：更改的图像未反映。

4

1 回答 1

11

如果它被缓存在浏览器中，您可以强制对图像的每个请求使用不同的 URL，因此始终通过向服务器附加不同的查询字符串来请求服务器，例如等于自 1970 年以来的当前毫秒数。一个简短的自定义指令可能是一个好方法：

app.directive('noCacheSrc', function($window) {
  return {
    priority: 99,
    link: function(scope, element, attrs) {
      attrs.$observe('noCacheSrc', function(noCacheSrc) {
        noCacheSrc += '?' + (new Date()).getTime();
        attrs.$set('src', noCacheSrc);
      });
    }
  }
});

用作

<img no-cache-src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/320px-Swallow_flying_drinking.jpg">

（就像ngSrc会使用的那样）。你可以在这个 plunker中看到一个演示。

src请注意，如果已经有查询字符串，则所写的指令可能不起作用。它可能需要测试是否存在 a?并调整其行为方式（即，如果存在 a ?，则添加&+ 秒）。

编辑：仅使用一个指令进行简化。

于 2014-04-25T07:38:47.433 回答