How to display image after passing data from another page

Ionic Framework ionic-v3
1

Hello i want to display a user’s profile pic. I am returning other user details from home page to User profile page.

home.ts
UserPage(uid_fk, username, bio, profile_pic) {
this.navCtrl.push(UserPage, { uid_fk: uid_fk, username: username, bio: bio, profile_pic: profile_pic });
}

the uid, username, and bio are returning ok. But i can not display the image.

userprofile.ts
export class UserPage {
public uid_fk: string;
public username: string;
public bio: string;
public profile_pic: string;
public noRecords: boolean;
public userDetails: any;
public resposeData: any;
public dataSet: any;
userPostData = {
};

constructor(
    public common: Common,
    public navCtrl: NavController,
    public app: App,
    public menuCtrl: MenuController,
    public navParams: NavParams,
    public authService: AuthService
) {
    this.uid_fk = navParams.get('uid_fk');
    this.username = navParams.get('username');
    this.bio = navParams.get('bio');
    this.profile_pic = navParams.get('profile_pic');
}

userprofile.html

{{uid_fk}}

{{username}}

{{bio}}

2

You data pic is base64? Try this!

You can concat this string to your profile_pic: “data:image/jpeg;base64,”

this.profile_pic = "data:image/jpeg;base64," + navParams.get('profile_pic');

And then, in your html:

<img *ngIf="profile_pic" [src]="profile_pic">

Remove “string” in declaration:

public profile_pic;
1 Like
3

SOLVED. Thanks Daniel your answer was extremely clear and very useful. Greetings from Greece thanks again.

1 Like
4

Thanks. :+1:

Dont forget to mark as solved (button below post). Then others can read the solution.