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

Ionic Framework ionic-v3
1

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
2

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

2 Likes
3

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

User.ts:

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

and in .html:

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

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

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

4

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