Angular 2 - render byte[] from Web Api as an image src

Question

I have an Angular 2 app that is connecting to a Web Api backend. There is an endpoint that returns a byte[] of an image that is stored in a sql database. How can I display this as an image in Angular? I can change either the Web Api or Angular app.

My Web Api endpoint looks like this...

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

    return image;
}

And my Angular HTML looks like this...

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

What conversion do I need to do, or what should the api serve up?

Answer 1

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:

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

Don' forget to add the directive to the directives array of your component.

---

Working Plunker for example usage