AngularJS - isImage() - 检查URL是否为图片

18 浏览
0 Comments

AngularJS - isImage() - 检查URL是否为图片

有可能通过给定的URL来检查图片是否存在且是一个图片资源吗？\n例如：\n

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

\n还是这只是服务器端的事情？\n请不要使用jQuery，我不使用它。

0

2 答案

0 Comments

问题出现的原因是需要判断一个给定的URL是否为图片，并在加载完成后执行相应的操作。解决方法是使用AngularJS的指令来实现。

首先，可以使用ng-src指令来加载图片：

其次，可以使用$http模块来检查图片是否存在：

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

然后，可以使用自定义指令来实现图片加载完成后的操作：


  




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

以上就是解决这个问题的方法，通过使用ng-src指令加载图片，并使用自定义指令来判断图片是否加载完成。

0
0 Comments

AngularJS中的isImage()函数用于通过URL检查是否为图像。该问题的出现原因是需要确定给定的URL是否为图像。解决方法是使用HTMLImageElement对象和延迟对象来检查URL。通过创建一个新的Image对象，使用onerror和onload事件来判断图像是否可用，然后返回一个promise对象来处理结果。通过将这段代码封装在一个服务中，可以在控制器中调用该服务来进行测试。代码中的isImage()函数被封装在一个名为Utils的工厂中，以便在控制器中使用。在使用isImage()函数时，需要注意在onerror事件中使用reject()而不是resolve()。这样的处理方式更加合适，因为图像不可用并不被视为异常情况。同时，使用resolve()可以方便地设置结果标志。在某些情况下，这种处理方式可能会导致Chrome浏览器的内存泄漏问题，但经过测试并没有发现内存泄漏的情况。

0