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: stackoverflow.com/a/38324958/1961059. — Maximilian Riegler
– Maximilian Riegler, Commented Nov 7, 2016 at 16:50
Possible duplicate of Angular 2 - render byte[] from Web Api as an image src — Maximilian Riegler
– Maximilian Riegler, Commented Nov 7, 2016 at 16:52

Alexei - check Codidact · Accepted Answer · 2017-06-03 04:48:34Z

12

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

answered Jun 3, 2017 at 4:48

Alexei - check Codidact

23.2k22 gold badges159 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

balajivaishnav Over a year ago

how do you achieve lazy loading for loading base64 images any idea ?

Collectives™ on Stack Overflow

angular2 display base64 image

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related