Angularjs 处理未找到的图像

在AngularJS中，如果找不到最初指定的图像，如何加载不同的图像？在本例中，我有一个slug，不知道文件扩展名是什么。例如，它可以是png、jpg、svg

我想做的是：

<img ng-src="images/{{slug}}" />

直到找到一个存在的文件

是否有一个函数可以在无法加载图像时触发？

尝试以下操作：

<object data="images/{{slug}}.png" type="image/png">
   <img ng-src="images/{{slug }}" />
 </object>

---

嗨，本，你是这样创建指令的吗

检查图像是否存在的功能：

function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(true);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = url;
}

angular.module('app').directive('fallbackSrc', [fallbackSrc]);

    function fallbackSrc() {

      var fallbackSrc = {
        scope: {
          fsrc: '@'

        },
        link: function postLink(scope, elem, attr) {
          var ext = ['.png', '.svg', '.jpg'];

          existingImage = ext.some(function(extension ) {
            var imageUrl = scope.fsrc + extension;

            imageExists(imageUrl, function(exists) {
              if (exists) {
                angular.element(elem).attr("src", imageUrl);
                return true;
}

            });

          });

        }
      };
      return fallbackSrc;


    };

 <img fallback-src fsrc="http://www.google.com/images/srpr/nav_logo14" />

指令：

function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(true);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = url;
}

angular.module('app').directive('fallbackSrc', [fallbackSrc]);

    function fallbackSrc() {

      var fallbackSrc = {
        scope: {
          fsrc: '@'

        },
        link: function postLink(scope, elem, attr) {
          var ext = ['.png', '.svg', '.jpg'];

          existingImage = ext.some(function(extension ) {
            var imageUrl = scope.fsrc + extension;

            imageExists(imageUrl, function(exists) {
              if (exists) {
                angular.element(elem).attr("src", imageUrl);
                return true;
}

            });

          });

        }
      };
      return fallbackSrc;


    };

 <img fallback-src fsrc="http://www.google.com/images/srpr/nav_logo14" />

HTML:

function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() {
    callback(true);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = url;
}

angular.module('app').directive('fallbackSrc', [fallbackSrc]);

    function fallbackSrc() {

      var fallbackSrc = {
        scope: {
          fsrc: '@'

        },
        link: function postLink(scope, elem, attr) {
          var ext = ['.png', '.svg', '.jpg'];

          existingImage = ext.some(function(extension ) {
            var imageUrl = scope.fsrc + extension;

            imageExists(imageUrl, function(exists) {
              if (exists) {
                angular.element(elem).attr("src", imageUrl);
                return true;
}

            });

          });

        }
      };
      return fallbackSrc;


    };

 <img fallback-src fsrc="http://www.google.com/images/srpr/nav_logo14" />

如果图像由您的服务器提供，我认为服务器应该负责确定正确的分机。如果你只是猜测，我不认为有什么好方法可以做到这一点。。。任何方法都会像不使用Angular一样难看。多亏了Sylvester，现在解决了。我如何使它适用于多文件扩展名，即jpg和svg？如果我只是复制这段代码多次，它将与简单地将img放入多次相同，也就是说，我将得到图像未找到框。非常感谢，这真的很有帮助！：）