angular2 affichage de l'image en base64

J'essaie d'afficher une image qui vient à partir d'un serveur comme une chaîne base64. Le http et le serveur de détails ne sont pas importants à ma question (en gros, ça fonctionne).
J'ai ce code qui ne fonctionne pas; c'est à dire que je vois toutes les données dans le composant, mais aucune image ne s'affiche sur l'écran.

le 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...";

Le composant:

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

Comme mentionné, le code ne fonctionne pas. Au lieu de l'image sur l'écran, je reçois: les Guillemets ne sont pas pris en charge pour l'évaluation de la!

Je vais apprécier un exemple de ce problème simple.

InformationsquelleAutor user3027595 | 2016-11-07
  1. 11

    L'exemple suivant montre comment afficher encodées en base64 des images à l'aide ASP.NET de Base et d'angle 2:

    PhotoController (côté serveur)

    [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 (Angulaire de service)

    getPhotos(int entityId) {
    return this.http.get(`${this.apiBasePath}vehicles/${vehicleId}/photos`)
        .map(res => res.json());
}

    de l'entité composant.ts

    Serveur envoie un contenu codé, donc je suis justement en train de préparer une propriété contenant l'en-tête et le contenu. Modèle Html est séparé.

    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">
    • comment voulez-vous atteindre le chargement paresseux pour le chargement des images en base64 une idée ?
    InformationsquelleAutor Alexei