技術

[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

【Docker/Mac】Dockerコマンド

どうも中田です。 今回はDocker。 巷でよく話には出てましたが使ってみるとめ …

no image

【Rails】kaminariさんって配列もいけるんですね

どうも中田です。 久しぶりのブログになります。 railsでページングをする場合 …

no image

【AWS】nginx/rails/mysqlをインストール

どうも、中田です。 最近AWSにテストサーバを立ち上げて検証したり、 お客様に一 …

プログラミンを触ってみた

2020年から小学校でのプログラミング教育が必修になる(かも?)ということで、 …

CentOS7でDocker内部からpingができない(外部通信できない)!

どうもなかたです CentOS7にDocker入れて、Docker内部から外に向 …