angularjs – 如果ngSrc路径解析为404,有没有办法回退到默认值?

前端之家收集整理的这篇文章主要介绍了angularjs – 如果ngSrc路径解析为404,有没有办法回退到默认值?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建的应用程序需要我的用户设置4个信息之前,这个图像甚至有机会加载。这个图像是应用程序的中心部分,所以破碎的图像链接使得它看起来像整个东西是borked。我想要另一个图像在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相关文章