Display an image from database using web api in angularjs

Question

How to retrieve and display an image from the database based on employee_id after clicking on the search button using web api in angularjs in asp.net in visual studio 2013

Siddhartha Sharma · Answer

API Code [Route("api/profileimage/{userId}")] public string Get(string userId) { var image = _profileImageService.GetProfileImage(userId); return System.Convert.ToBase64String(image); } Angular code : 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); } ); } } HTML code :

Sanwar Ranwa · Answer

https://www.codeproject.com/Articles/996994/Image-Preview-using-MVC-AngularJs-and-Web-API Check this link you can modify according to your requirement

P.Suresh Kumar · Answer

Hey Sanwar Ranwa I'm actually looking for web api controller. The links you have provided are with mvc controller concepts. Please help me with empty web api controllers.

Sanwar Ranwa · Answer

Hello P.Suresh Please check these Links https://www.codeproject.com/Articles/996994/Image-Preview-using-MVC-AngularJs-and-Web-API https://www.aspsnippets.com/Articles/Display-data-from-Database-using-AngularJS-and-Web-API-in-ASPNet-MVC.aspx

Display an image from database using web api in angularjs

Answers (4)