Angular web api byte array to image

Question

Hi How to convert web api byte[] array to html image in angular ? thanks

Ravishankar N · Answer

Hi llkin, Convert the image to Base64 on your server: [Route( "api/profileimage/{userId}" )] public string Get(string userId) { var image = _profileImageService.GetProfileImage(userId); return System.Convert.ToBase64String(image); } For ease of use I created a new directive to encapsulate all the code we need for getting and displaying the 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); } ); } } In your template include it like this: "tile.UserId" width= "100" height= "100" />

Elavarasan R · Answer

Hi, check it out below links.. References: https://javaee.ch/2017/02/11/send-and-image-from-the-java-backend-to-angular-using-rest-services/ https://www.aspsnippets.com/Articles/Display-Byte-Array-as-Image-using-ng-src-in-AngularJS.aspx http://www.macaalay.com/2014/09/26/rendering-images-from-byte-arrays-and-converting-images-to-byte-arrays-using-angularjs/ Video Reference: https://www.youtube.com/watch?v=Ftq_QpnnGus

Rajanikant Hawaldar · Answer

Correct me if I understand wrong https://www.aspsnippets.com/Articles/AngularJS-Display-Byte-Array-content-as-Image-in-ASPNet-MVC.aspx

Angular web api byte array to image

Answers (3)