こんばんは
アプリケーションを作っていてフロント側で画像を出すときって
ストレージ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