Angular 6 - поймать отсутствующий источник изображения и попытаться сбросить тот же источник

Question

У меня есть список больших двоичных объектов, которые пользователь может добавить. Если у меня есть только что добавленное изображение, которое не завершило загрузку к моменту обновления списка, я улавливаю ошибку следующим образом и вижу, что функция запускается, когда она должна:

<img src="https://MyUrl/thumbnails/{{ blob.name }}" width="125" id="MyImg"
        (error)="error()"/>

Можно ли передать это изображение в функцию ошибок, чтобы повторить попытку установки источника?

Answer 1

Вы можете создать директиву, которая связывает src и повторяет попытку (устанавливает значение NULL и снова устанавливает значение в привязке с тайм-аутом) на error.Вот, например, что-то очень похожее на то, что вам нужно, и очень хорошая отправная точка: https://medium.com/@sub.metu/angular-fallback-for-broken-images-5cd05c470f08

В основном он использует запасной URL-адрес в случае сбоя src.

Примерно так (быстро модифицируется, не тестируется):

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

@Directive({
  selector: 'img[retrySrc]',
  host: {
    '(error)': 'loadError()',
    '(load)': 'clearTimer()',
  }
})
export class RetrySrcDirective implements OnDestroy {
  private _retrySrc: string;
  private _timer;

  constructor(
    private element: ElementRef<HTMLImageElement>,
  ) {
  }

  @Input()
  set retrySrc(value: string) {
    this.clearTimer();
    this._retrySrc = value;
    this.element.nativeElement.src = value; //each set on src triggers a new request in google Chrome
  }

  ngOnDestroy() {
    this.clearTimer();
  }

  loadError() {
    this.clearTimer();
    this._timer = setTimeout(() => this.element.nativeElement.src = this._retrySrc, 5000);
  }

  clearTimer() {
    if (this._timer) {
      clearTimeout(this._timer);
      delete this._timer
    }
  }
}

, и вы используете его как:

<img [retrySrc]="'https://MyUrl/thumbnails/'+blob.name">

В качестве альтернативы вы можете периодически выполнять HttpClient запросы в директиве и устанавливать src, как только выполучить ответ 200 (пока что используйте src по умолчанию).