angularjs - 如果ngSrc路径解析为404，是否有办法回退到默认值？

我正在构建的应用程序要求用户设置4条信息，然后才能加载该图像。该图像是应用程序的核心部分，因此断开的图像链接使整个外观看起来很烦。我想在404上放另一张图片。

有任何想法吗？我想避免为此编写自定义指令。

令我惊讶的是，我找不到类似的问题，尤其是当文档中的第一个问题相同时!

http://docs.angularjs.org/api/ng.directive:ngSrc

最佳答案

这是一个非常简单的指令，用于监视加载图像并替换src时的错误。 (Plunker)

HTML:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

Javascript:

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set('src', attrs.errSrc);
        }
      });
    }
  }
});

如果要在ngSrc为空白时显示错误图像，则可以添加以下(Plunker):

attrs.$observe('ngSrc', function(value) {
  if (!value && attrs.errSrc) {
    attrs.$set('src', attrs.errSrc);
  }
});

问题在于，如果该值为空白，则ngSrc不会更新src属性。

关于angularjs - 如果ngSrc路径解析为404，是否有办法回退到默认值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16310298/