javascript - 当需要用图像获取图像时向服务器发送太多请求
问题描述
我想用 blob 从 Angular 7 中的服务器获取图像。我为发送请求编写了此服务:
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 次。
有什么问题 ?我怎么解决这个问题 ???
解决方案
我想我听说 Angular 可以多次调用方法。如果您在组件的 init 方法中调用 downloadImage,则可以改为使用绑定来访问 this.image。
<img class="table-user-pic"
[src]="image"
id="photo"
alt="user avatar" width="50">
(但是,如果您可以通过 url 直接访问服务器中的图像,而不是流和 blob,则可以更多地利用浏览器中的现有功能。但这在您的情况下可能是不可能的)
推荐阅读
- node.js - 结合 Express 4 和 Vue CLI 3
- vb.net - 在 vb.net 中验证 DateTimePicker
- angularjs - Appengine 在将一些当前更改部署到实时服务器 Js 和 Css 时遇到问题
- python - 将包含空格的 shell 变量作为参数传递
- android-layout - 我的 LinearLayout Textview 和...不在不同的手机中保持原位
- python-3.x - 通过坐标在 LAS 文件中查找点
- javascript - SCRIPT1004:应为“;” 发生在“For”循环 IE 浏览器中
- apache - 地图服务器奇怪的 REQUEST=GetCapabilities&SERVICE=WMS&VERSION=1.1.1 输出
- azure - 无法从私有子网中的实例连接到 Internet
- google-maps-markers - 如何从角度谷歌地图获取标记对象而不单击它