技術

[Angular]APIから画像を取得して表示する

投稿日:

こんばんは

アプリケーションを作っていてフロント側で画像を出すときって
ストレージURLをapiから返すことが多いと思います。

ですが、サーバー側でQRコード画像などを生成して
フロント側で表示する場合は、少し工夫が必要です。

やり方としては
responseタイプにblobを設定します。

fetchQRCode() {
  const url = 'localhost:3000';
  return this.http.get(url, { responseType: 'blob' });
}

次にcomponent側でsubscribeします。
戻り値(blob)をreader.readAsDataURL()の引数にします。

  fetchQRcodeImage(): void {
    this.apiService.fetchQRCode().subscribe(
      val => {
        this.createImageFromBlob(val);
      }
    );
  }

  createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener(
      'load',
      () => {
        this.imageBlobUrl = reader.result;
      },
      false
    );
    if (image) {
      reader.readAsDataURL(image);
    }
  }

最後にimgタグで画像を表示します。

<img [src]="imageBlobUrl">

これで画像が表示できるようになりました。

参考URLは以下です。
Blobs with HTTP Post and Angular 5

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Macで簡単にIE環境を構築する手順

こんにちは、コーテッグの小山です。 今までちょろっとIE対応をやることはあったの …

no image

gormでバルクインサート

こんにちは gormでレコードを作成する時は user := User{Name …

no image

[wordpress]パーミションを変えたらHTTP500(Internal Server Error)

こんばんは Kusanagiにインストールしたwordpressの管理画面からフ …

Amazon Rekognitionを使うと写真に自動でタグを付けられます。

こんにちは、高石です。 来月20日(5月20日)はエンたまもくもく会#5です。 …

[Angular] @NgModuleをざっくりと

どうも中田です。 最近社内でAngularの波が起こってるので そのビッグウェー …