技術

[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] リアクティブフォームの値をtsファイルで設定する。

こんにちは、コーテッグの小山です。 Angularのリアクティブフォームについて …

[Xcode] The executable was signed with invalid entitlements. でアプリを実機確認できない!

こんにちは。たなかです。 作ったiOSアプリを実機確認したくて、Xcodeからデ …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

セレクトボックスの中にfont-awesomeのアイコンを表示したい。 そんなと …

[JS] イベントバブリングまとめ

どうも中田です いつも忘れちゃうんですよ。 javascriptのイベントバブリ …