强制重新加载 ng-src [英] Forcing a ng-src reload

问题描述

如何强制 angularjs 重新加载具有 ng-src 属性的图像，当图像的 url 没有改变但其内容有变化时?

<img ng-src="{{urlprofilephoto}}">

执行文件上传的uploadReplace 服务正在替换图像的内容，而不是url.

app.factory('R4aFact', ['$http', '$q', '$route', '$window', '$rootScope',功能($http，$q，$route，$window，$rootScope){返回 {上传替换:函数(imgfile，profileid){var xhr = new XMLHttpRequest(),fd = new FormData(),d = $q.defer();fd.append('profileid', profileid);fd.append('filedata', imgfile);xhr.onload = 函数(ev){var data = JSON.parse(this.responseText);$rootScope.$apply(function(){if (data.status == 'OK') {d. 解析(数据)；} 别的 {d.拒绝(数据)；}});}xhr.open('post', '/profile/replacePhoto', true)xhr.send(fd)返回 d. 承诺；}}}]);

当uploadReplace返回时，我不知道如何强制重新加载图像

app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){$scope.clickReplace = function() {R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(){//??在这里我需要强制重新加载 imgsrc})}}])

解决方案

一个简单的解决方法是向 ng-src 附加一个唯一的时间戳以强制图像重新加载，如下所示:

$scope.$apply(function () {$scope.imageUrl = $scope.imageUrl + '?'+ 新日期().getTime();});

或

angular.module('ngSrcDemo', []).controller('AppCtrl', ['$scope', function ($scope) {$scope.app = {imageUrl: "http://example.com/img.png"};var random = (new Date()).toString();$scope.imageSource = $scope.app.imageUrl + "?cb=" + random;}]);

How can I force angularjs to reload an image with an ng-src attribute, when the url of the image has not changed, but its contents has?

<div ng-controller='ctrl'>
    <img ng-src="{{urlprofilephoto}}">
</div>

An uploadReplace service that performs a file upload, is replacing the content of the image, but not the url.

app.factory('R4aFact', ['$http', '$q', '$route', '$window', '$rootScope',
function($http, $q, $route, $window, $rootScope) {
    return {
        uploadReplace: function(imgfile, profileid) {
            var xhr = new XMLHttpRequest(),
                fd = new FormData(),
                d = $q.defer();
            fd.append('profileid', profileid);
            fd.append('filedata', imgfile);
            xhr.onload = function(ev) {
                var data = JSON.parse(this.responseText);
                $rootScope.$apply(function(){
                    if (data.status == 'OK') {
                        d.resolve(data);
                    } else {
                        d.reject(data);
                    }
                });
            }
            xhr.open('post', '/profile/replacePhoto', true)
            xhr.send(fd)
            return d.promise;
        }
    }
}]);

When the uploadReplace returns, I don't know how I can force the image to reload

app.controller('ctrl', ['$scope', 'R4aFact', function($scope, R4aFact){
    $scope.clickReplace = function() {
        R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(){
            // ??  here I need to force to reload the imgsrc 
        })
    }
}])

解决方案

An easy workaround is to append a unique timestamp to ng-src to force image reload as follows:

$scope.$apply(function () {
    $scope.imageUrl = $scope.imageUrl + '?' + new Date().getTime();
});

or

angular.module('ngSrcDemo', [])
    .controller('AppCtrl', ['$scope', function ($scope) {
    $scope.app = {
        imageUrl: "http://example.com/img.png"
    };
    var random = (new Date()).toString();
    $scope.imageSource = $scope.app.imageUrl + "?cb=" + random;
}]);

这篇关于强制重新加载 ng-src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！