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

Question

我有一个Angular应用程序,显示人物配置文件图像(从服务器加载),并有一个选项来更改它.

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

我尝试使用meta标签禁用缓存,但它不适合我.

仅在删除浏览器缓存后,图像才会在浏览器上更改.我怎么解决这个问题？

基于注释的示例流程:

1. 初始路径: http://server_path/image_name.jpg
2. 调用Web服务并更改图像(注意:图像路径不会更改.仅替换图像本身)
3. 在浏览器上刷新页面

问题:未反映的更改图像.

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使用的那样).你可以在这个plunker中看到一个演示.

注意,如果src已经有一个查询字符串,那么所写的指令可能不起作用.它可能需要测试a的存在?并调整其行为(即如果有?,则添加&+秒).

编辑:只使用一个指令简化.