[解決済み] Angular 2 - 画像のurlが有効か壊れているかをチェックする

質問

APIから大量の画像URLを取得し、angular 2のウェブアプリケーションに表示しています。URLのいくつかは壊れており、私はそれらを私のウェブサーバーにローカルに保存されているデフォルトの画像に置き換えたいと思っています。URLをテストし、ステータスコード404の場合に壊れた画像を交換する方法を提案する人がいますか？

ありがとうございます。

どのように解決するのですか？

を聴く。 error イベントを聞く。

<img [src]="someUrl" (error)="updateUrl($event)">

ここで updateUrl(event) { ... } は新しい値を this.someUrl .

プランカーの例

もし、コードだけでチェックしたい場合は javascriptで画像が存在するか確認する。

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
   }
})
class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

ディレクティブプランカーの例