我试图渲染动态和图像链接到一个广告的Angular ，问题是，即使在标签的'src'参数似乎是正确的，它不能显示图像。这是我的代码在Angular

ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges: " + changes);
    console.log(this.ads.length);
    for(let i = 0; i< this.ads.length; i++){
      this.service.getImage(this.ads[i]).subscribe(blobList => this.ads[i].images = blobList).add( () => {
        console.log("Byte: " + this.ads[i].images.at(0));
        let div = document.getElementById("ad" + this.ads[i].id) as HTMLDivElement;
        console.log(div);
        let bytea: ArrayBuffer = this.ads[i].images.at(0) as ArrayBuffer;
        const buffer = Buffer.from(bytea);
        const blob = new Blob([buffer], {type: 'image/png'});
        const image = this.createImageFromBlob(blob);
        div.appendChild(image);
      });
    }
  }

This is the function I use to create an HTMLImageElement from a BLOB

public createImageFromBlob(blob: Blob): HTMLImageElement {
    const image = new Image();
    const url = URL.createObjectURL(blob);
    image.src = url;
    return image;
  }

这是广告界面

export interface Ad{
  id: number;
  title: string;
  description: string;
  user: User;
  property: Property;
  price: number;
  mq: number;
  status: string;
  city: string;
  images: ArrayBuffer[];
}

这是我的HTML代码

<span *ngIf="!isEmpty()">
  <span *ngFor="let ad of ads">
    <span *ngIf="canShow(ad.status)">
      <div class="container justify-content-center">
        <div class="card jumbotron">
          <div class="text-center badge-info badge" style="margin-top: -2%;" id="statusTitle">
              <h2>{{ad.status.toUpperCase()}}</h2>
          </div>
          <div class="row no-gutters m-3">
              <div class="col-lg-5 col-md-7 col-md-12" id="ad{{ad.id}}">

              </div>
              <div class="col">
                  <div class="card-block px-2">
                      <h3 class="card-title">{{ad.title}}</h3>
                      <p class="card-text">{{ad.description}}</p>
                      <a href="#" class="btn btn-primary" disabled="disabled">{{ad.price}}</a>
                      <hr>
                      <a href="/profiles/{{ad.user.nickname}}?sessionId={{getSessionId()}}" class="card-text text-dark">{{ad.user.nickname}}</a>
                  </div>
              </div>
          </div>
          <div class="card-footer w-100 text-muted">
              <a href="/ad/{{ad.id}}?sessionId={{getSessionId()}}" class="btn btn-lg btn-outline-primary btn-block">Leggi annuncio</a>
          </div>
        </div>
      </div>
      <hr>
    </span>
  </span>
</span>

我正在添加java springboot控制器，用来从数据库中获取数据。这个方法返回一个Byte[]的列表，因为我在postgres数据库中有bytea。

@GetMapping("/getImage")
    public List<byte[]> getImage(HttpServletRequest request, @RequestParam String adId){
        List<Image> imageList = DBManager.getInstance().getImageDao().findByAdId(Integer.parseInt(adId));
        List<byte[]> imgList = new ArrayList<>();
        for (Image image : imageList) {
            imgList.add(image.getData());
        }
        return imgList;
    }

而这就是我在Angular中用来调用java服务器的方法。

getImage(adId: number): Observable<Blob[]> {
    return this.http.get<Blob[]>('http://localhost:8080/image', {params: {adId: adId}, responseType: 'json'});
  }

如您所见，我正尝试将HTMLimageElement注入到通过ID链接的div中。
我尝试了一些其他的方法，但这是唯一给我一个正确的斑点，但在网站上它只显示“图像找不到”图标。image
我不知道我做错了什么，任何帮助都将不胜感激，谢谢。