AngularでBase64エンコードされた画像を表示したい

こんにちは！kossyです！

さて、今回はAngularでSafeResourceUrlインターフェイスを用いて、Base64でエンコードされた画像を表示する方法を
ブログに残してみたいと思います。

環境
node 12.13.1
npm 6.14.4
Angular 9.1.7

Angularでは、信頼できないリソースだと判定された場合、srcにunsafe:を付与する機能があります。
脆弱性対応がデフォルトで行われるのが理由なのですが、開発者側は、「このリソースは安全である」と
明示的に宣言しなければならない不便さがあります。

信頼できないリソースだと判定された場合の検証ツールのwarning

この「リソースが安全であると明示する」には、SafeResorceUrlインターフェイスを用いる必要があります。

以下、実装例です。

src/app/app.component.ts


import { Component, OnInit } from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
import { SampleService } from './services/sample.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  dataUrl: SafeResourceUrl;

  // Base64エンコードされた画像を取得するservice
  constructor(
    private sampleService: SampleService,
    private domSanitizer: DomSanitizer
  ) {
    this.sampleService.getImage().subscribe(data => { // dataの中身はBase64エンコードされたデータを想定。"data:image/png;base64,......"
      this.dataUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(data);
    }
  }
}


src/app/app.component.html

<img [src]='dataUrl'>

warningが出ずに問題なく表示されれば成功です。