如果ngSrc路径解析为404,那么是否有办法回到默认状态?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

我正在构建的应用程序要求我的用户在这个图像有机会加载之前设置4条信息。这个图像是应用程序的中心部分,所以损坏的图像链接使它看起来就像整个东西都是边界的。我想让另一张图片在404上取代它的位置。

有什么想法吗?我想避免为此编写自定义指令。

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

提问于
用户回答回答于

代码如下:

app.directive('img', function () {
    return {
        restrict: 'E',        
        link: function (scope, element, attrs) {     
            // show an image-missing image
            element.error(function () {
                var w = element.width();
                var h = element.height();
                // using 20 here because it seems even a missing image will have ~18px width 
                // after this error function has been called
                if (w <= 20) { w = 100; }
                if (h <= 20) { h = 100; }
                var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=Oh No!';
                element.prop('src', url);
                element.css('border', 'double 3px #cccccc');
            });
        }
    }
});

用户回答回答于

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为空时显示错误图像,可以添加以下内容:

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

问题是,如果值为空,ngSrc不会更新src属性。

扫码关注云+社区