Angularで画像読み込みに失敗した際の代替えイメージを指定するimgディレクティブを作成

画像読み込みに失敗(404エラーなど)した場合に代替えイメージを表示する方法です。

コンポーネント内で対応する方法

簡単な方法としては、次のような方法があります。

VIew

<img src="imageUrl" (error)="onImageLoadingError">

ViewModel

export class TestComponent {

  imageUrl = 'https://www.gstatic.com/webp/gallery3/2.png';
  defImageUrl = '../assets/images/default.png';
  constructor() { }

  onImageLoadingError() {
    this.imageUrl = this.defImageUrl;
  }

}

上記の方法では、imgタグの errorイベントを受けてコンポーネント側で保持している、イメージURLを代替えイメージのURLで置き換えるという方法です。
今回は、imgタグに属性ディレクティブを追加する形で代替えイメージの指定を行ってみます。　

imgディレクティブを作成して対応する方法

Angularのディレクティブの作成はangular-cli を使えば、app.moduleへの登録を含め簡単に行うことが出来ます。
次のコマンドでベースとなるディレクティブを作成します。　

ng g d directives/defaultImage

コマンド実行後には、app/directives ディレクトリ以下に次のファイルが作成され、app.moduleへの登録も自動で行われています。

• default-image.directive.ts
• default-image.directive.spec.ts

default-image.directive.ts

import { Directive, Input, HostListener, HostBinding } from '@angular/core';
// Input, HostListener, HostBindingを追加

@Directive({
  selector: 'img[default]',
})
export class DefaultImageDirective {
  @Input() default: string;

  @HostBinding('attr.src') @Input() src;
  @HostListener('error') updateSrc() {
    this.src = this.default;
  }
}

あとは、次のように使うだけです。

View

<img src="http://img.tiqav.com/ah.th.gifhttp://img.tiqav.com/ah.th.gif" default="../assets/images/default.png">