Angular 11如何进行http调用以从api获取图像预览答案

【问题标题】：Angular 11 how to make http call to get image preview from apiAngular 11如何进行http调用以从api获取图像预览
【发布时间】：2022-10-23 15:30:36
【问题描述】：

我的 .net 核心 webapi 中有以下方法，它返回数据库中上传的任何文件的预览。它在邮递员中工作。如何从角度代码进行http调用？

using (MemoryStream stream = new MemoryStream(attachmentData.Item2))
            {
                var image = Image.FromStream(stream); 
                double aspectRatio = (double)image.Height / (double)image.Width;

                Image thumb = image.GetThumbnailImage(150, (int)Math.Floor(150 * aspectRatio), () => false, IntPtr.Zero);

                using (var thumbStream = new MemoryStream())
                {
                    thumb.Save(thumbStream, ImageFormat.Jpeg);

                    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
                    response.Content = new ByteArrayContent(thumbStream.ToArray());
                    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline");
                    response.Content.Headers.ContentDisposition.FileName = attachmentData.Item1;
                    response.Content.Headers.ContentType = GetMediaTypeHeaderValue(attachmentData.Item1);
                    response.Content.Headers.ContentLength = thumbStream.ToArray().Length;

                    return response;
                }
            }

我尝试了以下操作，但它不起作用，即出错时，它没有从 api 返回实际的错误消息。

getBlob(attachmentId: number): Observable<Blob> {
    const url = `${this._environment.apiBaseUrl}/v1/attachments/${attachmentId}/preview`;
    return this.http
        .get<Blob>(url, { responseType: 'blob' as 'json', observe: 'response' })
        .pipe(
            map(resp => {
                return resp.body
            }),
            catchError(err => {
                return of(err);
            })
        );
}

【问题讨论】：

标签： blob angular11

【解决方案1】：

查看此示例，其中图像存储在 ts 文件中。 https://stackblitz.com/edit/angular-download-image-example-e9ybwc?file=src/app/app.component.ts

【讨论】：