How to get base64_encoded json image and display it in ionic 2

I have long blob in my database and in server side i have encoded to base64

how do I get ? Also in the user model

             export interface User {
               pic: string;

Is the type taken is String ??
if so then what should I do in order to read it and display it in an avatar for example!

1 Like

You should be able to append data:image/jpeg;base64, to your pic and display it in the [src] of an <img> tag, for example:

let picUrl = "data:image/jpeg;base64," + pic

Then you can use this picUrl as the src in the HTML


hi mr jourdan, thank you for replying… I am facing a problem in handling this.

  schoolAppUsers.load().subscribe(users => {
      this.users = users;

thats the service Im using which of a User model


   export interface User {
        UserID: number;
       name: string;
       username: string;
       password: string;
       pic: string;

and in .html:

<button ion-item *ngFor="let user of users" (click)="goToDetails(user.UserID)">

 <ion-avatar item-left>
   <img [src]="">
	<h2 style="text-align:left;">{{ }}</h2>
	<ion-icon name="arrow-dropright" item-right></ion-icon>

How do I append (pic) inside (users) cuz I am looping through…

Thanks!! I was posting new topic and I saw this one first!!! Solved. After 1 year!! :+1::+1: