angular2 display base64 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.

If you bind with brackets, then you're binding to an object and need to rewrite it like so: `[src]="'data:image/PNG;base64,' + imageContent"`, but this will be stripped out by Angular 2 - see this post: http://stackoverflow.com/a/38324958/1961059. — Maximilian Riegler, Nov 07 '16 at 16:50
Possible duplicate of [Angular 2 - render byte\[\] from Web Api as an image src](http://stackoverflow.com/questions/38324762/angular-2-render-byte-from-web-api-as-an-image-src) — Maximilian Riegler, Nov 07 '16 at 16:52

score 12 · Answer 1 · answered Jun 03 '17 at 04:48

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">

how do you achieve lazy loading for loading base64 images any idea ? — balajivaishnav, May 09 '18 at 11:46

angular2 display base64 image

1 Answers1