angularjs - property - ng-src angular 5

Forzar una recarga de ng-src

Question

¿Cómo puedo obligar a angularjs a volver a cargar una imagen con un atributo ng-src, cuando la URL de la imagen no ha cambiado, pero su contenido sí?

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

Un servicio uploadReplace que realiza una carga de archivo reemplaza el contenido de la imagen, pero no la 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;
        }
    }
}]);

Cuando el uploadReplace vuelve, no sé cómo puedo forzar la imagen para volver a cargar

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 
        })
    }
}])

Answer 1

¿Tal vez podría ser tan simple como agregar una cadena de consulta de decache a la URL de la imagen? es decir.

var imageUrl = ''http://i.imgur.com/SVFyXFX.jpg'';
$scope.decachedImageUrl = imageUrl + ''?decache='' + Math.random();

Esto debería obligarlo a volver a cargar.

Answer 2

Prueba esto

app.controller(''ctrl'', [''$scope'', ''R4aFact'', function($scope, R4aFact){
$scope.clickReplace = function() {
    R4aFact.uploadReplace($scope.imgfile, $scope.pid).then(function(response){
        $scope.urlprofilephoto  = response + "?" + new Date().getTime(); //here response is ur image name with path.
    });
}
 }])

Answer 3

Recurrí a hacer una directiva para poner param aleatorio en el src, pero solo si la imagen cambia, así que no lío tanto con el almacenamiento en caché.

Lo uso para actualizar la foto del perfil del usuario en la barra de navegación cuando lo actualizan a través de AJAX, lo que no sucede tan a menudo.

(function() {
  "use strict";

  angular
    .module("exampleApp", [])
    .directive("eaImgSrc", directiveConstructor);

  function directiveConstructor() {
    return { link: link };

    function link(scope, element, attrs) {
      scope.$watch(attrs.eaImgSrc, function(currentSrc, oldSrc) {
        if (currentSrc) {
          // check currentSrc is not a data url,
          // since you can''t append a param to that
          if (oldSrc && !currentSrc.match(/^data/)) {
            setSrc(currentSrc + "?=" + new Date().getTime());
          } else {
            setSrc(currentSrc);
          }
        } else {
          setSrc(null);
        }
      })

      function setSrc(src) { element[0].src = src; }
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="exampleApp">
  <div>
    <img ea-img-src="src"></img>
  </div>

  <button ng-click="src = ''http://placehold.it/100x100/FF0000''">IMG 1</button>
  <button ng-click="src = ''http://placehold.it/100x100/0000FF''">IMG 2</button>
  <button ng-click="src = ''http://placehold.it/100x100/00FF00''">IMG 3</button>
</div>

Answer 4

Un "enfoque angular" podría ser crear su propio filtro para agregar un parámetro de querystring aleatorio a la URL de la imagen.

Algo como esto:

.filter("randomSrc", function () {
    return function (input) {
        if (input) {
            var sep = input.indexOf("?") != -1 ? "&" : "?";
            return input + sep + "r=" + Math.round(Math.random() * 999999);
        }
    }
})

Entonces puedes usarlo así:

<img ng-src="{{yourImageUrl | randomSrc}}" />

Answer 5

Una solución fácil es agregar una marca de tiempo única a ng-src para forzar la recarga de la imagen de la siguiente manera:

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

o

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;
}]);