Display an image from database using web api in angularjs

[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);

}

);

}

}