Angular 组件/服务将图像内容返回到 URL

Question

我正在尝试设置一个组件/服务以将 base64 图像内容返回到来自 html 的 img.src 调用。

我的图像存储在 google Firebase/Firestorage 上，只能通过方法调用来访问，以获取传递到 img.src 的下载 url。

我还有一个 div，我将 html 传递给 [innerHtml]。在我传递的 html 中是我的域上源的路径。 innterHtml 的内容也来自 Firestorage。

我想创建一个路由+组件来处理这个问题。将 base64 返回给查询。

我使用 toPromise 强制顺序执行，并在 ngOnInit 完成之前设置了 imgSrc 变量。

提前完成 ngOnInit 将导致 404。

我目前收到 404。

代码：

页面代码：

<div class="parent">
    <div class="content" [innerHtml]="pageContent"></div>
<div>

内容：

pageContent = "<div><h1>Hello</h1><img [src]="/path/to/images/hello.jpg"></div> 

路线/路径在路由模块中：

  {
    path: 'path/to/images/:filename',
    component: ImageComponent,
    data: {
      title: 'Image',
    }
  },

图像组件：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { AngularFireStorage } from "@angular/fire/compat/storage";
import { ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs";
import { ImageService } from "../../services/ApiCalls/Images/images.service";

@Component({
  selector: 'image-component',
  template: '{{imgSrc}}',
})
export class ImageComponent implements OnInit {
  constructor(
    private imageService: ImageService,
    private route: ActivatedRoute,
    private httpClient: HttpClient,
    private firebaseStorage: AngularFireStorage,
  ) {

  }

  public imgSrc: string;
  isImageLoading: boolean;

  getImage(imageUrl: string): Observable<Blob> {
    return this.httpClient.get(imageUrl, { responseType: 'blob' });
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      return reader.result.toString();
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
    return reader.result.toString();
  }

  ngOnInit() {
    this.route.params.toPromise().then(par => {
      const filename = par['filename']
      this.firebaseStorage.ref(`images/${filename}`).getDownloadURL().toPromise().then(src => {
        this.getImage(src).toPromise().then(blob => {
          this.imgSrc = this.createImageFromBlob(blob);
        })
      })
    });
  }
}