当AngularJS jqlite不存在损坏的URL时,用默认值替换损坏的img url

时间:2016-07-11 08:12:33

标签: javascript angularjs replace broken-links

当AngularJS jqlite attr()不存在损坏的网址时,我想用默认值替换所有损坏的img网址。我这样用它但不会工作。

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'");
})

什么是正确的脚本?

2 个答案:

答案 0 :(得分:1)

你已经有了这样做的库。

检查angular-fallback-srcangular-img-fallback

答案 1 :(得分:1)

解决这个问题的方法很少

尝试下一个选项

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