技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

fullpage.jsでコンテンツを画面幅いっぱいでスクロールさせる。

fullpage.jsとは fullpage.jsは一つのコンテンツを画面いっぱ …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

no image

[Angular] router-outletの外で現在のurlを取得

こんにちは、コーテッグのこやまです。 Angularでapp.component …

no image

ng-ifのelse句でコンポーネントのプロパティと名前重複

こんにちは、コーテッグのこやまです。 Angularを触っていたら、コンポーネン …

no image

[Angular]リアクティブフォームでのセレクトボックスの扱い方。

Angularはまだ本が少ないので、リアクティブフォームの説明は基本的なところも …