我在尝试获取从 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());
}
这就是我试图应用于 DOM 元素[style.background-image]的内容：
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 });
}
并简化我的服务的调用方，以向 DOM 元素[style.background-image]提供以下内容：
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="">，我会让图像异步显示。 这种方法的不幸之处在于，当请求正在进行时，图像错误图标是可见的。 对于不返回图像的任何项目(不完整的数据库(，此错误图标将保留
要避免在加载实际图像之前显示错误图像，请将您的 html 更改为以下内容：
<img *ngIf="project.image" [src]="project.image | async" alt="">
更新 3中的解决方案也将起作用。但是，这是另一种方法。您可以设置div 的[style]指令来添加background-image。在将样式传递给 dom 时，您必须对其进行清理。
在您的组件中.html：
<div class="image" [style]="backgroundImageStyle"></div>
.. 要在获得图像之前删除错误图像，我们添加一个
*ngIf：
<div class="image" *ngIf="backgroundImageStyle"
[style]="backgroundImageStyle">
</div>
。在您的组件中：
// ..
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);
}
// ..
为什么你不能直接将img链接到背景图像？
<div class="image"
[style.background-image]="url('/your-url-to-img')"></div>
浏览器将为您完成工作。
您需要确保 Web 服务器返回正确的图像和标头