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

发布时间：2020-12-17 09:18:25 所属栏目：安全来源：网络整理

导读：我正在构建的应用程序需要我的用户设置4个信息之前，这个图像甚至有机会加载。这个图像是应用程序的中心部分，所以破碎的图像链接使得它看起来像整个东西是borked。我想要另一个图像在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属性。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!