Angular 13从NestJS取数据图片不显示，网络面板返回undefined

核心问题 #

1. 错误使用FileReader和Blob：接口返回的是包含图片路径的JSON对象列表，并非图片二进制数据，完全不需要转DataURL，直接用路径拼接即可访问。
2. 全局image变量无法适配循环列表：每个产品的图片路径是各自的coverimage字段，不能用单一全局变量存储。
3. createImageFromBlob逻辑错误：传入的是路径数组，却尝试读取未初始化的this.image生成Blob，导致网络请求出现undefined的错误响应。

修正代码 #

1. service.ts（保持原样即可）

public getallbooks(): Observable<any> {
  return this.httpclient.get(`${this.API_SERVER}/books`);
}

2. component.ts（移除无用的图片转换逻辑）

results?: Book[];

ngOnInit() {
  this.apiService.getallbooks().subscribe((data: Book[]) => {
    this.results = data;
    console.log(this.results);
  });
}

3. HTML模板（直接使用每个产品的图片路径）

<div class="grid" *ngFor="let result of results">
  <div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
    <img
      class="image"
      [src]="'http://localhost:3000/' + result.coverimage | safeurl"
      alt="书籍封面"
      height="400px"
      width="250px"
      style="border: 1px solid red"
    />
  </div>
</div>

额外说明 #

确保NestJS服务器已正确配置静态资源服务（比如使用ServeStaticModule），且coverimage字段返回的是静态目录下的相对路径（如uploads/book1.jpg），这样拼接后的URL才能正确指向服务器上的图片文件。

内容的提问来源于stack exchange，提问作者M Nouman