angular2 display base64 image - image

Question

I'm trying to display an image that comes from a server as a base64 string. The http and server details are not important to my question (basically, it works).
I have this code that does not work; i.e. I see all the data in the component but no image shows on the screen.
the service:
import { Injectable } from 'angular2/core'
import {Observable} from 'rxjs/Observable';
#Injectable()
export class ImageService {
constructor() {
}
public getImage(): Observable<string> {
return Observable.create(imageData);
}
}
const imageData: string = "iVBORw0KGgoAAAANSUhE...";
The component:
import { Component } from 'angular2/core';
import { ImageService } from './service'
#Component({
selector: 'my-app',
template: '<div><img [src]="data:image/PNG;base64,{{imageContent}}"> </div>',
providers: [ImageService]
})
export class AppComponent {
private imageContent: string = "";
constructor(imageService: ImageService) {
imageService.getImage().subscribe(response => {
this.imageContent = response;
});
}
}
As mentioned, the code does not work. Instead of the image on the screen, I receive: Quotes are not supported for evaluation!
I'll appreciate a working example for this simple problem.

Answer 1

The following example shows how to display base64 encoded images using ASP.NET Core and Angular 2:
PhotoController (server-side)
[HttpGet]
public async Task<IEnumerable<PhotoResource>> GetPhotos(int entityId)
{
// get photo information
// in my case only path to some server location is stored, so photos must be read from disk and base64 encoded
foreach (var photoR in photoResources)
{
var currPath = Path.Combine(Host.ContentRootPath, "upload", photoR.FileName);
byte[] bytes = System.IO.File.ReadAllBytes(currPath);
photoR.Content = Convert.ToBase64String(bytes);
}
return photoResources;
}
PhotoService (Angular service)
getPhotos(int entityId) {
return this.http.get(`${this.apiBasePath}vehicles/${vehicleId}/photos`)
.map(res => res.json());
}
entity-component.ts
Server already sends encoded content, so I am just preparing a property containing header and content. Html template is separate.
this.photoService.getPhotos(this.entityId)
.subscribe(photos => {
this.photos = photos;
for (let photo of this.photos) {
photo.imageData = 'data:image/png;base64,' + photo.content;
}
});
entity-component.html
<img *ngFor="let photo of photos" [src]="photo.imageData" class="img-thumbnail">