所以我试图制作一个用户个人资料图片指令,该指令接受用户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标记为已更改一次,以便可以重新加载和缓存正确的图像?或者有更好的方法吗?