Angular directive for a fallback image

Question

If an image on a separate server doesn't exist I'd like to display a default image. Is there an angular directive to accomplish this?

Solution 1

No but you can create one.

http://jsfiddle.net/FdKKf/

HTML:

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>

JS:

myApp.directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});

Solution 2

Is there an angular directive...

http://ngmodules.org/modules/angular-img-fallback

Github: https://github.com/dcohenb/angular-img-fallback

(32 stars as of now)

Solution 3

Angualr 2 Version

https://github.com/VadimDez/ng2-img-fallback

HTML

<img fallback-src="http://google.com/favicon.ico" src="http://google.com/failedImage.png"/>

Angular 2 Component

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[fallback-src]'
})
export class FallbackSrc {

  @Input('fallback-src') imgSrc: string;
  private el: HTMLElement;
  private isApplied: boolean = false;
  private EVENT_TYPE: string = 'error';

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
    this.el.addEventListener(this.EVENT_TYPE, this.onError.bind(this))
  }

  private onError() {
    this.removeEvents();

    if (!this.isApplied) {
      this.isApplied = true;
      this.el.setAttribute('src', this.imgSrc);
    }
  }

  private removeEvents() {
    this.el.removeEventListener(this.EVENT_TYPE, this.onError);
  }

  ngOnDestroy() {
    this.removeEvents();
  }
}

Solution 4

I wrote my own fallback lib.

A pretty simple and straightforward angular fallback image lib:

https://github.com/alvarojoao/angular-image-fallback

Utility to work with loading images and handling image error, has image-holder to handle errors in image loading and image-loading for images loading placeholders

http://alvarojoao.github.io/angular-image-fallback

Usage

Just add the image attribute to your <img /> tags

<img image="{{'path/to/img.jpg'}}" />

Make sure you don't use ng-src as your image src attribute.

Advanced options

with custom fallback and loading placeholders:

<img image="{{image.url}}" image-loading="/image/loading.gif" 
     image-holder="/image/error.png" />

Example:

https://jsfiddle.net/alvarojoao/4wec4gsq/embedded/result/

View more solutions

Comments

[Josh David Miller]

Not that I've seen, but it wouldn't be hard to write one.

[Jon Onstott]

Possible duplicate of if a ngSrc path resolves to a 404, is there a way to fallback to a default?

[kfis]

Nice! I only want to add, that if he hasn't jQuery included, he should write iElement.on('error',function() {

[Ketan]

Not sure why I put angular.element but iElement may have worked too

[natecraft1]

how do you enforce the same size on this image that applies to the images you are "falling back" on?

[Ketan]

thru css or width and height attributes. Assuming that they all will be of the same size.

[jpotts18]

This is a good directive. I had a problem with it because the ng-src could also be a null value. Here was my fix. I hope it helps. gist.github.com/jpotts18/7161375

[Lukus]

Note that the standard onerror attribute works fine as well unless there's interpolation within the fallback value.

[atian25]

just use iAttrs.$set('src', iAttrs.fallbackSrc)

[nokturnal]

Instead, I would use $(element).one(...) (or unbind the event after it is consumed) to ensure you don't get a recursive error handling loop if the replacement image doesn't exist.

[Illidan]

This works, but not smooth enough. In case the image not found, you may see for the some short time a default browser icon for "missing resource", and right after that it being replaced by image from 'fallback-src'. So user sees kind of flick, and personally I think this is not good experience.

[Davut Gürbüz]

I've tried similar one for audio it seems doesn't work for audio 404's . any idea ?

[Dalibor]

How do you invoke some function instead? for example, if image is not loaded, raise modal with error notice

[Ketan]

@Dalibor instead of this line angular.element(this).attr("src", iAttrs.fallbackSrc); You need to add the code to invoke the modal.