Angular动态渲染PostgreSQL存储的广告图片失败，请求排查解决

我看了你的代码，发现几个关键问题导致图片无法正常显示，咱们一步步来修正：

1. HTTP请求的响应类型配置错误 #

你的Angular服务里getImage方法设置了responseType: 'json'，但后端返回的是二进制byte数组，这会让浏览器把二进制数据当成JSON解析，直接破坏了原始的图片数据。

修正后的服务方法：

getImage(adId: number): Observable<Blob[]> {
  // 注意这里responseType要设为'blob'，类型断言是为了绕过TypeScript的类型检查
  return this.http.get<Blob[]>('http://localhost:8080/image', {
    params: { adId: adId.toString() },
    responseType: 'blob' as 'json'
  });
}

2. 误用Node.js的Buffer API #

浏览器环境并没有Node.js的Buffer对象，你用Buffer.from(bytea)转换ArrayBuffer是错误的，直接用原始的ArrayBuffer/Blob创建URL就可以了。

3. 直接操作DOM不符合Angular最佳实践 #

你通过document.getElementById获取DOM元素并手动添加图片，这种方式很容易和Angular的变更检测机制冲突，而且代码不够优雅。咱们改用Angular的数据绑定来处理：

第一步：修改Ad接口，存储Blob URL而非ArrayBuffer #

export interface Ad{
  id: number;
  title: string;
  description: string;
  user: User;
  property: Property;
  price: number;
  mq: number;
  status: string;
  city: string;
  imageUrls: string[]; // 改成存储图片的Blob URL
}

第二步：修改ngOnChanges逻辑，创建Blob URL并存入Ad对象 #

ngOnChanges(changes: SimpleChanges): void {
  console.log("ngOnChanges: ", changes);
  console.log(this.ads.length);

  this.ads.forEach(ad => {
    this.service.getImage(ad.id).subscribe(blobList => {
      // 为每个Blob创建URL并存入ad的imageUrls数组
      ad.imageUrls = blobList.map(blob => URL.createObjectURL(blob));
    });
  });
}

第三步：修改HTML模板，用*ngFor渲染图片 #

把原来的空div替换成Angular的循环渲染，不需要手动操作DOM了：

<div class="col-lg-5 col-md-7 col-md-12">
  <img *ngFor="let imgUrl of ad.imageUrls" [src]="imgUrl" alt="Ad image" class="img-fluid">
</div>

4. 别忘了清理Blob URL避免内存泄漏 #

当组件销毁时，要记得释放创建的Blob URL，否则会造成内存泄漏：

ngOnDestroy(): void {
  this.ads.forEach(ad => {
    ad.imageUrls?.forEach(url => URL.revokeObjectURL(url));
  });
}

额外检查点 #

• 确认后端返回的byte[]确实是有效的PNG图片数据：可以用Postman调用接口，把响应保存为.png文件看看能不能正常打开。
• 检查浏览器控制台的网络请求：确认图片接口的响应状态码是200，且响应内容是二进制数据。

按照上面的步骤修改后，应该就能正常显示图片了。

备注：内容来源于stack exchange，提问作者Matteo