web-dev-qa-db-ja.com

Angular js-isImage（）-画像がURLかどうかを確認

指定されたURLによって画像が存在し、それが画像リソースであるかどうかを確認することはできますか？

例えば：

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

それともサーバー側のものですか？

JQUERYを使用しないでください

javascriptangularjsimage
18
itsme

最善のJavaScriptアプローチは、遅延オブジェクトでHTMLImageElementオブジェクトを使用することだと思います。

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

使用法：

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

HTMLImageElementを使用すると、いくつかの利点があります。ファイルがダウンロード可能かどうかをテストするだけでなく、imgタグで表示できる有効な画像リソースでもあります。

私はこのコードを簡単なサービスにラップしてテストを行いましたが、うまくいくようです：

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

デモ： http://plnkr.co/edit/u5F6FfO3dEkNSMYV1amo?p=preview

46
dfsq

ng-srcを使用できます

<img ng-src="" />

もう1つの方法は、httpモジュールを使用してそれが存在するかどうかを確認することです。

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

    };
});

更新：

[〜＃〜] 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";
});
9
Thalaivar