Question

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

我想做的是：

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

然后我希望它去检查

images/{{slug}}.png
images/{{slug}}.jpg
images/{{slug}}.svg

直到找到存在的文件。

如果无法加载图像，是否会触发某个功能？

Answer 1

嗨Ben你创建了http://plnkr.co/edit/Bp47O0sqyO10mZGDiVGh?p=preview

这样的指令

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

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;


    };

<强> HTML：

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

Answer 2

试试这个：

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

处理未找到的图像

2 个答案: