Angular 2 - 从Web Api渲染byte []作为图像src

时间:2016-07-12 09:20:20

标签: c# angular

我有一个连接到Web Api后端的Angular 2应用程序。 有一个端点返回存储在sql数据库中的图像的byte []。 如何在Angular中将其显示为图像? 我可以更改Web Api或Angular应用程序。

我的Web Api端点看起来像这样......

[Route("api/profileimage/{userId}")]
public byte[] Get(string userId)
{
    var image = _profileImageService.GetProfileImage(userId);

    return image;
}

我的Angular HTML看起来像这样......

<img src="http://localhost:2116/api/ProfileImage/{{tile.UserId}}" width="100" height="100"/>

我需要进行哪些转换,或api应该提供什么?

2 个答案:

答案 0 :(得分:23)

将图像转换为服务器上的Base64:

[Route("api/profileimage/{userId}")]
public string Get(string userId)
{
    var image = _profileImageService.GetProfileImage(userId);

    return System.Convert.ToBase64String(image);
}

为了便于使用,我创建了一个新的指令来封装获取和显示图像所需的所有代码:

import {Directive, OnInit, Input} from '@angular/core';
import {Http} from '@angular/http';
import {BROWSER_SANITIZATION_PROVIDERS, DomSanitizationService} from '@angular/platform-browser';

@Directive({
  selector: '[profile-image]',
  providers: [BROWSER_SANITIZATION_PROVIDERS],
  host: {
    '[src]': 'sanitizedImageData'
  }
})
export class ProfileImageDirective implements OnInit {
  imageData: any;
  sanitizedImageData: any;
  @Input('profile-image') profileId: number;

  constructor(private http: Http,
              private sanitizer: DomSanitizationService) { }

  ngOnInit() {        
    this.http.get("http://localhost:2116/api/ProfileImage/" + profileId)
      .map(image => image.text())
      .subscribe(
        data => {
          this.imageData = 'data:image/png;base64,' + data;
          this.sanitzedImageData = sanitizer.bypassSecurityTrustUrl(imageData);
        }
      );
  }
}

在您的模板中包含以下内容:

<img [profile-image]="tile.UserId" width="100" height="100" />
  

Don'忘记将指令添加到您的directives数组中   成分

  

使用Plunker作为示例用法

答案 1 :(得分:7)

So the accepted answer by rinukkusu is very helpful & detailed ,但您不必:

1-都不做指令(当然可以)

2-也不使用消毒剂服务并设置消毒例外

这两个任务让我有点不知所措,尤其是绕过了消毒过程,因此我将编写最简单的安全处理方式

您可以简单地使用以下方法(以通用方式):

1-从后端以base64编码的字符串返回图像

2-在Angular 2+中接收图像的base64字符串并在您的打字稿文件中构建以下字符串属性,然后直接在html中安全地使用它,而无需使用消毒剂服务

// so for example you will get the image for example in this dataService.ts

this.http.get(this.api_url + 'image').subscribe(response => {
    this.image = response['image'];
    this.imageSrc = 'data:image/jpeg;base64,' + this.image;
});

然后在html文件中,您可以直接使用imageSrc属性(例如,从已准备好属性的注入的dataService中使用)

<img id="image" [src]="dataService.imageSrc" width="100" height="50">

我希望这对其他人有帮助,也感谢rinukkusu,因为他的回答对我个人有所帮助