如何使用Web API中的二进制图像数据作为DOM元素的背景图像(Angular)

Question

我在尝试获取我正在从Web API检索的图像时遇到了很多麻烦,以便在我的Angular应用程序中显示为背景图像.

Web API返回图像的操作如下所示:

    /// <summary>
    /// Returns the medium image for the specified project as image/png media type.
    /// </summary>
    /// <param name="projectId"></param>
    /// <returns></returns>
    [HttpGet("{projectId:int}/image/medium")]
    [SwaggerResponse(200, typeof(byte[]))]        
    [Produces("image/png")]
    public FileContentResult GetImageMedium(int projectId)
    {            
        var res = _repository.GetProjectResource(projectId, "Medium");
        FileContentResult result = new FileContentResult(res.ByteContent, res.MediaType);            
        return result;
    }

这是我目前的Angular服务方法的样子(但我尝试了很多替代方案):

  getProjectImage(id: number) {
    return this._http
      .get(`${this._url}/${id}/Image/Medium`, { headers: this._auth.headers, responseType: ResponseContentType.Blob })
      .map(response => response.arrayBuffer());
  }

这就是我想要应用于[style.background-image]DOM元素的内容:

return `url(${'data:image/png;base64,' + new Buffer(response)})`

正如我之前所说,我一直在尝试从我在互联网上找到的东西组合,但我对所涉及的大部分内容存在固有的误解.什么是我的Web API返回给我？我该如何处理该客户端？如何将内容按摩到适合background-imagecss属性的内容？除了让它发挥作用外,我真的想更好地理解这一点.非常感谢所有帮助!

更新

我还试图更改Web API操作以返回如下的base64字符串:

/// <summary>
/// Returns the medium image for the specified project as image/png media type.
/// </summary>
/// <param name="projectId"></param>
/// <returns></returns>
[HttpGet("{projectId:int}/image/medium")]
[SwaggerResponse(200, typeof(byte[]))]
[Produces("image/png")]
public string GetImageMedium(int projectId)
{
    var res = _repository.GetProjectResource(projectId, "Medium");
    return Convert.ToBase64String(res);
}

并像这样处理客户端:

  getProjectImage(id: number) {
    return this._http
      .get(`${this._url}/${id}/Image/Medium`, { headers: this._auth.headers });
  }

并简化我的服务的调用者以提供[style.background-image]DOM元素的以下内容:

return `url(${'data:image/png;base64,' + response})`

我console.log编写了响应,它确实看起来像一个base64字符串(我想？).但是css永远不会改变.

更新2

我的标记目前是这样的:

<div class="image"
     [style.background-image]="project.image | async"></div>

我的组件代码目前是这样的:

projects.map(project => {
  project.image = this._projectsService.getProjectImage(project.projectId)
    .map(response => `url('data:image/png;base64,${response['_body']}')`)
});

我已经到了这样的地步,如果我console.log这样做,复制它,并将其粘贴到开发工具中的div的css规则中,图像就会显示出来.我已经尝试过运行它NgZone并且css仍然不会出现.任何和所有的帮助表示赞赏.

更新3

因此,如果我<div class="image" [style.background-image]="project.image | async"></div>改为<img [src]="project.image | async" alt="">,我会让图像异步显示.这种方法的不幸之处在于,当请求在飞行中时,图像错误图标是可见的.对于未返回图像的任何项目,此错误图标仍然存在(不完整的数据库)

Answer 1

为了避免在加载实际图像之前显示错误图像，请将 html 更改为：

<img *ngIf="project.image" [src]="project.image | async" alt="">

Update 3中的解决方案也将起作用。然而，这里还有另一种方法。您可以设置[style]div 的指令来添加background-image. 将样式传递给 dom 时，您必须对其进行清理。

在你的 component.html 中：

<div class="image" [style]="backgroundImageStyle"></div>

..为了删除错误图像直到我们得到图像，我们添加一个 *ngIf：

<div class="image" *ngIf="backgroundImageStyle" 
                    [style]="backgroundImageStyle">
</div>

...在你的 component.ts 中：

// ..
import { DomSanitizer } from '@angular/platform-browser';

// Declare a variable to store the sanitized style
private backgroundImageStyle;

// Initialize the constructor
constructor(sanitizer: DomSanitizer) { 
    // You can call this whereever you want, I am doing it in constructor
    this.backgroundImageStyle = this.getBackgroundImageStyle();
}

private getBackgroundImageStyle() {        
    // sanitize the style expression
    style = `background-image: url(${project.image})`;
    this.sanitizer.bypassSecurityTrustStyle(style);
}
// ..