强制缓存图像重新加载

时间:2015-09-06 19:15:05

标签: javascript angularjs node.js

所以我试图制作一个用户个人资料图片指令,该指令接受用户ID作为参数并以内联方式显示图像。我在服务器端使用NodeJS / Express 4.x,在前端使用Angular 1.2.25。我完全决定使用指令的唯一原因是因为如果我尝试使用<img ng-src="/someurl">,我会收到403服务器响应,因为图像请求不是通过http拦截器发送的。指令和控制器如下:

.directive('profileImg', ['AuthToken', function (AuthToken) {
  return {
  restrict: 'E',
  controller: AuthWrapperProfile,
  scope: {
    userid: '@',
    css: '@',
    style: '@'
  },
  template: '<img ng-src="{{url}}" style="{{style}}" class="{{css}}"></img>'
 }
}]);

AuthWrapperProfile.$inject = ['AuthToken', '$scope'];
function AuthWrapperProfile(AuthToken, $scope) {
  $scope.token = AuthToken.getToken();

  // initial image url once userid is loaded
  $scope.$watch('userid', function () {
  $scope.url = '/api/avatar/' + $scope.userid + '?token=' + $scope.token 
      + '&cb=' + Date.now(); // Added to URL to force reload

  });

  // update picture based on update event being fired
  var listener = $scope.$on('avatar:update', function (event, data) {
    $scope.url = '/api/avatar/' + $scope.userid + '?token=' + $scope.token 
         + '&cb=' + Date.now(); // Added to URL to force reload
  });

  // clean up listener
  $scope.$on('$destroy', listener);
};

问题: 每当更新用户配置文件以反映不同的配置文件图片时,我能够找出如何强制角度/浏览器重新加载图片的唯一方法是附加一个Date.now的URL参数,这会导致它重新加载每个单次调用以获取图像。

有没有办法以某种方式将URL标记为已更改一次,以便可以重新加载和缓存正确的图像?或者有更好的方法吗?

0 个答案:

没有答案