当 AngularJS jqlite 不存在损坏的 url 时，将损坏的 img url 替换为默认值答案

【问题标题】：Replace a broken img url with a default when the broken url does not exists with AngularJS jqlite当 AngularJS jqlite 不存在损坏的 url 时，将损坏的 img url 替换为默认值
【发布时间】：2016-07-11 08:12:33
【问题描述】：

当 AngularJS jqlite attr() 不存在损坏的 url 时，我想用默认值替换所有损坏的 img url。我就是这样用的，但是不行。

var app = angular.module('app');

app.controller('AdminCtrl',function($scope{
    angular.element(document.querySelector('img')).attr("onerror","this.src='../assets/img/broken/broken-link.png'");
})

什么是正确的脚本？

【问题讨论】：

如果 img 标签对你来说不够用，添加 ng？
@Erez 不，有时ng-src 有一个链接，但服务器上的文件已删除

标签： javascript angularjs replace broken-links

【解决方案1】：

您的库已经这样做了。

检查angular-fallback-src 和angular-img-fallback。

【讨论】：

不使用use指令如何实现？
您必须处理onError，但这是一个事件，而不是一个属性。那是您的代码中的错误。
检查here和here

【解决方案2】：

解决这个问题的方法很少

尝试下一个选项

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

<img ng-src="wrongUrl.png" on-error-src="someurl.png"/>

或者

<img ng-src="{{ imagesrc}}" onerror="this.src='someimgsrc.png'"/>

因为你不想使用指令，你可以使用这个 img 标记行来为你工作

动态进行

<img ng-src="{{ imagesrc}}" nerror="angular.element(this).scope().imgError()"/>

并在函数或作用域 var 上实现这个 src

检查这个 plnkr https://plnkr.co/edit/S6KDo2crjMGASKtrToGo?p=preview

【讨论】：

如何给所有<img>标签动态添加onerror属性？
你应该做 onerror="angular.element(this).scope().imgError()"