각도 -보기에 반영되지 않은 서버의 변경된 이미지

Question

사용자 프로필 이미지 (서버에서로드 됨)를 표시하고이를 변경할 수있는 각도 응용 프로그램이 있습니다.

응용 프로그램을 처음로드하면 이미지가 제대로 표시됩니다. 웹 서비스를 호출하여 서버의 이미지를 변경합니다. 문제는 원격 서버에서 이미지를 변경 한 후에도 브라우저의 이미지가 페이지를 새로 고침해도 변경 사항을 반영하지 않는다는 것입니다.

캐싱을 사용하지 않으려면 메타 태그를 사용해 보았지만 제대로 작동하지 않았습니다.

브라우저 캐시를 삭제 한 후에 만 ​​이미지가 브라우저에서 변경됩니다. 이 문제를 어떻게 해결할 수 있습니까? 댓글을 기반으로

예 흐름 :

1. 초기 경로 : http://server_path/image_name.jpg
2. 통화 웹 서비스 및 이미지를 변경 (참고 :. 이미지의 경로 자체를 교체 만 이미지를 변경하지 않습니다)
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 많이 사용된다). demo in this plunker을 볼 수 있습니다.

src에 이미 쿼리 문자열이있는 경우 작성된 ​​지시문이 작동하지 않을 수 있습니다. ?의 존재 여부를 테스트하고 동작 방식을 조정해야합니다 (예 : ?이있는 경우 & 초를 대신 추가하십시오).

편집 : 하나의 지시문을 사용하여 단순화되었습니다.