技術

[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

[Angular]ng-forでオブジェクトを回してkeyとvalueを取得する。

AngularのディレクティブであるngForで以下のように、オブジェクトを回そ …

no image

【Rails】そろそろデバッグしましょうか

どうも中田です。 今までrailsの開発はIDEを使わずテキストエディタだけでや …

no image

[Rails]updateの時だけvalidationを実行させる

こんにちは アプリを作っていて、create時にはvalidationを実行させ …

[Angular6] 一つのタグに複数の条件分岐を書く

こんにちは どうしても一つのタグに複数の条件分岐を書きたい時があるかと思います。 …

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …