Question

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

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

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

仅在删除浏览器缓存后，图像才会在浏览器中更改。我该如何解决这个问题？

基于评论的示例流程：

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

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

Answer 1

如果它在浏览器中被缓存，您可以强制每个图像请求使用不同的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一样）。您可以看到demo in this plunker。

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

编辑：只使用一个指令简化。

Angular - 服务器中未更改的图像未在视图中反映

1 个答案: