当需要使用图像获取图像时向服务器发送太多请求[重复]

Question

我想在 Angular 7 中使用 blob 从服务器获取图像。 我为发送请求编写了这个服务：

  downloadImage(id: number): Observable<any> {
    console.log('in service ')
    return this.http.request('GET', this.appConfig.apiEndpoint + '/Post/DownloadFileForManager/' + id, { responseType: 'arraybuffer' });
  }

我的打字稿代码：

DownloadImage(id: number): Observable<any> {
this.postService.downloadImage(id).subscribe(data => {
  const arrayBufferView = new Uint8Array(data);
  const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
  const urlCreator = window.URL;
  const imageUrl = urlCreator.createObjectURL(blob);
  this.image = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
})
return this.image;
}

这是我的 HTML 代码：

    <ng-container matColumnDef="thumbnail">
            <th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.PHOTO' | translate }} </th>
            <td mat-cell *matCellDef="let element">
                <img class="table-user-pic"
                    [src]="DownloadImage(9)"
                    id="photo"
                    alt="user avatar" width="50">
            </td>
        </ng-container>

现在当我发送请求时，它会向服务器发送许多请求。

我有 4 件商品，但它发送了 firstImage 4 次和接下来的 8 次。

有什么问题？这个问题怎么解决？？？

Answer 1

我想我听说 Angular 可以多次调用方法。如果您在组件的 init 方法中调用 downloadImage，则可以使用绑定来访问 this.image。

<img class="table-user-pic"
                    [src]="image"
                    id="photo"
                    alt="user avatar" width="50">

（但是，如果您可以通过 url 直接访问服务器中的图像，而不是流和 blob，则可以更多地利用浏览器中的现有功能。但在您的情况下这可能是不可能的）