Javascript Angular js-isImage（）-检查它是否'；s图像的url地址

是否可以通过给定的url检查图像是否存在并且它是图像资源

例如：

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

或者只是服务器端的东西

请不要用JQUERY，我没有用它

你可以用

<img ng-src="" />

更新：

HTML

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

---

我认为最好的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
        }
    };
});

---

演示：抱歉，我忘了指定我不使用jQuery:）我也建议这样做，thanks@sbaaaang：我还提到了使用ng src属性的角度方式，另一种方式是通过服务器端进行检查，您在线程中已经提到了，我没有-1，实际上我给了您+1，但请删除jquery部分，如果可以的话，请指定如何使用ngsrc，这将非常棒！！谢谢lot@sbaaaang：dfsq给出了一个更好的答案，如果它是一个指令，我会喜欢它。对于那些有相同问题的人，这是一个使用指令的很酷的答案。测试工作非常完美@dfsq您

isImage（）

有输入错误；在

onerror

和

onload

中，您使用

resolve（）

。第一个应该是

reject（）

。除此之外，还有一个简单的解决方案。这不是打字错误，我故意解决（使用

false

flag）图像不可用的情况，我觉得这不像是异常情况，所以解决更好。此外，对于此功能，仅仅为了设置适当的标志

$scope.result=result，同时使用成功和错误处理程序是不方便的

@dfsq True，在您的情况下，它没有意义。我被你回答的应用误导了，承诺-拒绝回调与成功回调的作用不同，没有被调用。一切正常。对于那些不知道

$q

是什么的人，请参阅：我相信这会导致chrome内存泄漏。检查的每个图像都将创建一个新的image（）对象，该引用可以挂起。看见

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

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