Question

我有一个用户可以添加到的Blob列表。如果我有一个新添加的图像在刷新列表之前还没有完成上传，我会按以下方式捕获错误，并且可以看到该函数在应该执行的时候启动：

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

是否可以将该图像传递给错误功能以重试设置源？

Answer 1

您可以创建一条伪指令，该伪指令绑定src并在error上重试（设置为null并再次超时设置为绑定值）。例如，这与您需要的东西非常相似，并且是一个很好的起点：https://medium.com/@sub.metu/angular-fallback-for-broken-images-5cd05c470f08

如果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请求，并在收到200响应后设置src（同时使用一些默认的src）。

Angular 6-捕获丢失的图像源，然后尝试重置相同的源

1 个答案: