Es posible comprobar si un determinado url de la imagen existe y es un recurso de imagen ?

por ejemplo:

angular.isImage('http://asd.com/asd/asd.jpg')

O es sólo un material para el lado del servidor ?

NO JQUERY por favor no lo estoy usando

InformationsquelleAutor itsme | 2014-03-15

2 Comentarios

  1. 46

    Creo que la mejor javascript enfoque sería utilizar HTMLImageElement objeto con diferida del objeto:

    function isImage(src) {
    
        var deferred = $q.defer();
    
        var image = new Image();
        image.onerror = function() {
            deferred.resolve(false);
        };
        image.onload = function() {
            deferred.resolve(true);
        };
        image.src = src;
    
        return deferred.promise;
    }

    Uso:

    isImage('http://asd.com/asd/asd.jpg').then(function(test) {
        console.log(test);
    });

    Utilizando HTMLImageElement le da algunas ventajas: no sólo comprueba que el archivo se puede descargar pero también es válido recurso de imagen que se puede mostrar por img etiqueta.

    Me envuelve este código en servicio sencillo para hacer una prueba y parece que funciona:

    app.controller('MainCtrl', function($scope, Utils) {
        $scope.test = function() {
            Utils.isImage($scope.source).then(function(result) {
                $scope.result = result;
            });
        };
    });
    
    app.factory('Utils', function($q) {
        return {
            isImage: function(src) {
                //... above code for isImage function
            }
        };
    });

    Demo: http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview

    • Usted isImage() tiene un error tipográfico; en tanto onerror y onload utilizar resolve(). Primero uno debe ser reject(). Aparte de eso, buena solución.
    • No es un error tipográfico, deliberadamente resuelve (con false bandera) en el caso de la imagen de falta de disponibilidad, no se siente para mí como situación excepcional, resolver, así es mejor. Además de esta funcionalidad no sería conveniente tener tanto éxito y los controladores de error sólo con el fin de establecer la correcta bandera $scope.result = result;.
    • Cierto, en su caso, no tiene sentido. Estaba confundido por mi solicitud de su respuesta, donde la promesa de rechazo de devolución de llamada que hace un trabajo diferente del éxito, y no estaba siendo llamado. Todo claro.
    • para aquellos que no saben de lo que el $q es, ver: docs.angularjs.org/api/ng/service/$p
    • Creo que esto va a provocar una pérdida de memoria en chrome. Todas las imágenes de verificación crear una nueva Imagen() del objeto y esta referencia puede colgar alrededor. Consulte stackoverflow.com/questions/21309760/…
    • No lo creo, que acaba de hacer algunas pruebas y se ve igual que la memoria no es una fuga.

  2. 9

    Puede utilizar ng-src

    <img ng-src="" />

    Otra forma es comprobar si el que existe con la http módulo.

    var app = angular.module('myapp', []).run(function($http){
      $http.get('http://asd.com/asd/asd.jpg',
        //success
        function(data){
    
        };
    });

    Actualización:

    HTML

    <div ng-controller="Ctrl">
           <img ng-src="{{src}}" isImage />
    </div>

    JS

    var app = angular.module('app', []);
    
    app.directive('isImage', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    alert('image is loaded');
                });
            }
        };
    });
    
    app.controller('Ctrl', function($scope) {
        $scope.src ="http://asd.com/asd/asd.jpg";
    });
    • lo siento, se me olvidó especificar que no uso jQuery 🙂 yo disfrutar de la misma, gracias
    • También he mencionado el Angular de la forma, el uso de ng-atributo src y la otra manera es comprobar a través de lado de servidor que usted ha dicho en su hilo
    • yo no -1 , te di +1 en realidad, pero por favor, retire jquery parte y si se puede por favor especifique cómo utilizar ng-src podría ser impresionante !! muchas gracias
    • dfsq dio una respuesta mejor, me hubiera gustado que si se trataba de una directiva.
    • Para aquellos con el mismo problema, este es un fresco de la respuesta mediante una directiva. Probado funciona a la perfección. stackoverflow.com/a/17122325/2689390

Dejar respuesta

Please enter your comment!
Please enter your name here