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，我认为上面的代码是正确的（不确定是否有更好的返回图像的方法-请指导我）

在组件中，我的代码如下所示。

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

在服务中，实现是这样的

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

您可以在Web API中返回动态对象，并更改显示角度图像的方式。

我用这种方式显示来自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)
);

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

请检查您的图片在data:image/png或data:image/jpeg中是png还是jpeg https://docs.ansible.com/ansible/latest/user_guide/playbooks_reuse_roles.html#using-roles

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

1 个答案: