Replace a broken img url with a default when the broken url does not exists with AngularJS jqlite

Question

I want to replace all broken img url with a default when the broken url does not exists with AngularJS jqlite attr(). I use it like this but won't work.

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

What is correct script?

@Erez No, some times `ng-src` has a link but that file on the server removed — Ehsan Ali, Jul 11 '16 at 08:46

score 1 · Answer 1 · answered Jul 11 '16 at 08:39

1

You have libraries that already do that.

Check angular-fallback-src and angular-img-fallback.

answered Jul 11 '16 at 08:39

Ygalbel

5,214
1
24
32

How to implement it without use directive? – Ehsan Ali Jul 11 '16 at 08:45
You have to handle `onError` but it's an event, not an attribute. That's the mistake in your code. – Ygalbel Jul 11 '16 at 08:49
Check [here](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) and [here](https://api.jquery.com/error/) – Ygalbel Jul 11 '16 at 09:06

Erez · Answer 2 · 2016-07-11T09:03:59.290

there are few ways to solve that

try the next options

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"/>

Or

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

as you dont want to use directive you can use this img tag line will make the work for you

to do it dynamicly

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

and implement this src on the function or scope var

check this plnkr https://plnkr.co/edit/S6KDo2crjMGASKtrToGo?p=preview

you should do onerror="angular.element(this).scope().imgError()" — Erez, Jul 11 '16 at 09:05

Replace a broken img url with a default when the broken url does not exists with AngularJS jqlite

2 Answers2