Angular - измененное изображение на сервере не отображается

Question

У меня есть приложение Angular, которое показывает изображения профиля людей (загруженные с сервера) и имеет возможность изменить его.

Когда приложение загружается в первый раз, изображение отображается правильно. Я звоню в веб-сервис, чтобы изменить изображение на сервере. Проблема в том, что даже после изменения изображения на удаленном сервере изображение в браузере не отражает изменения даже при обновлении страницы.

Я пытался использовать метатеги, чтобы отключить кеширование, но у меня это не работает.

Изображение меняется в браузере только после того, как я удаляю кеш браузера. Как я могу решить это?

Пример потока на основе комментариев:

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 будет использоваться). Вы можете увидеть демо в этом поршне.

Обратите внимание, что указанная директива, вероятно, не будет работать, если src уже есть строка запроса. Возможно, потребуется проверить наличие ? и отрегулируйте, как он себя ведет (т.е. если есть ?, добавлять & + секунды вместо).

Редактировать: упрощается только с помощью одной директивы.