C#学习教程：Angular2-从WebApi渲染字节作为图像src有一个端点返回存储在sql数据库中的图像的byte[]。如何在Angular中将其显示为图像？我可以更改WebApi或Angular应用程序。我的WebApi端点看起来像这样......[Route("api/profileimage/{userId}")]publicbyte[]Get(stringuserId){varimage=_profileImageService.GetProfileImage(userId);返回图像；我AngularHTML看起来像这样...我需要做什么转换，或者api应该提供什么？在服务器上将图像转换为Base64：[Route("api/profileimage/{userId}")]publicstringGet(stringuserId){varimage=_profileImageService.GetProfileImage(userId);返回System.Convert.ToBase64String(图像);为了便于使用，我创建了一个新指令来封装获取和显示图像所需的所有代码：import{Directive,OnInit,Input}from'@angular/core';从'@angular/http'导入{Http}；从'@angular/platform-b??rowser'导入{BROWSER_SANITIZATION_PROVIDERS，DomSanitizationService}；@Directive({selector:'[profile-image]',providers:[BROWSER_SANITIZATION_PROVIDERS],host:{'[src]':'sanitizedImageData'}})导出类ProfileImageDirective实现OnInit{imageData:any;消毒图像数据：任何；@Input('profile-image')profileId:number;构造函数（私有http:Http,privatesanitizer: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);});在你的模板中包括这个：不要忘记将指令添加到组件的指令数组工作Plunker示例用法所以rinukkusu接受的答案非常有用和详细，但你不必：1-既不制作指令（但当然你can)2-norusesanitizerserviceandsanitizeExceptions我对这两个任务有点不知所措，尤其是绕过消毒，所以我会写出最简单的方法来安全地处理这个问题。您可以简单地使用以下内容（以通用方式）：1-从后端返回图像作为base64编码的字符串2-在Angular2+中接收图像的base64字符串并在您的打字稿文件字符串属性中构建以下内容和然后在没有清理服务的情况下直接在html中安全地使用它//例如，您将在此dataService.ts中获取图像this.http.get(this.api_url+'image').subscribe(response=>{image=response['image'];this.imageSrc='data:image/jpeg;base64,'+this.image;});然后在你的html文件中，你可以直接使用imageSrc属性（例如从注入的dataService中已经准备好的属性）我希望这对某人有帮助，非常感谢rinukkusu因为他的回答对我个人有帮助以上是C#学习教程：Angular2-RenderingbytefromWebApi作为imagesrc分享的全部内容，如果对你有用，需要详细了解C#学习教程，希望大家多多关注。本文收集自网络，不代表立场。如涉及侵权，请点击右侧联系管理员删除。如需转载请注明出处：
