Угловая директива для изображения нейтрализации

версия

Angualr 2 https://HTML

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

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();
  }
}

Я записал свой собственный lib нейтрализации.

А довольно простой и простой угловой lib изображения нейтрализации:

https://Утилита github.com/alvarojoao/angular-image-fallback

для работы с загрузкой изображений и обработкой ошибки изображения, имеет держателя изображения для обработки ошибок в загрузке изображения и загрузке изображения для изображений, загружающих заполнителей

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

, Использование

Просто добавляет атрибут изображения к Вашему <img />, теги

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

Делают уверенный , Вы не используете ng-src в качестве своего изображения src атрибут.

Расширенные настройки

с пользовательской нейтрализацией и загружающий заполнителей:

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

Пример:

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

там угловая директива...

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

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

(32 звезды на данный момент)