Return 使用 Web API 核心和 Angular 7 在 UI 中显示图像

Question

我正在尝试在 UI 中显示图像。

这是我的 ASP.NET Web API 核心代码。

    [Route("{id:int}/image")]
    public async Task<IActionResult> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return this.File(result, "image/jpeg");
    }

我按照这个 Link 我假设上面的代码是正确的（不确定是否有更好的方法来 return 图片 - 请指导我）

在组件中，我的代码是这样的。

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    this.thumbnail = baseImage;
  },
  error => (this.errorMessage = error)
);

在Service中，实现是这样的

getDesignThumbnail(id: number) {
return this.http
.get(`https://localhost:44314/api/designs/${id}/thumbnail`)
.pipe(catchError(error => this.errorHandler(error)));

}

在HTML中，我是这样显示的（不知道对不对）

 <img width="100" height="100" data-bind="attr: { src: thumbnail }" />

我收到这条错误信息

Answer 1

您可以 return Web 中的动态对象 API 并更改在 angular 中显示图像的方式。

我用这种方式显示来自 API 的图像。

[Route("{id:int}/image")]
    public async Task<dynamic> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return new { Image = result}
    }

在服务中添加 private sanitizer: DomSanitizer 到构造函数。

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    let objectURL = 'data:image/png;base64,' + baseImage.Image;

    this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  },
  error => (this.errorMessage = error)
);

更新：我创建了一个演示，从存储的 json 文件中读取 base64 格式的 jpeg 图像。

请检查您的图片在 data:image/png 或 data:image/jpeg 中是 png 还是 jpeg https://stackblitz.com/edit/display-image-from-api

Return 使用 Web API 核心和 Angular 7 在 UI 中显示图像

Return an image and display in UI using Web API core and Angular 7

image

asp.net-web-api

asp.net-core-2.0

angular