How to convert base64 to image

Ionic Framework ionic-v3
1

I have a base64 string. how to convert base64 to image?
please help me out anyone.

2

if you want to display image using base 64 string then you can directly give it to src attribute of image and it will display in your app

3 
//ts code
this.base64Data=imageData;
this.converted_image= "data:image/jpeg;base64,"+this.base64Data;

//html code
<img  [src]="converted_image" alt="Select Image"/>
1 Like
4

This is my html

<div *ngFor="let img of mydata">
	
              <img [src]="img[0].image1'"/>        
    
</div>
below my response

Screenshot_9

please help me out how can i show

5

<img [src]=“img.image1’”/>

1 Like
6

Below my .ts file

    this.http.get(this.baseurl+this.user_id)
      .subscribe((res:Response)=>{
      let dataTemp = res.json(); //dataTemp is the json object you showed me
      this.mydata = dataTemp.GetAds; //contains a [] object with all yours user
    }
7

Steps are correct… l’ll change in html code…

1 Like
8

I’m put <img [src]="img.image1”/> this line but showing nothing

9

here is the console out put
Screenshot_13

10

copy this base64 string and try to generate output in this site

https://codebeautify.org/base64-to-image-converter

11

i want to show base64 image into my app how can i do that?

12

can you give your console base64 image ?

13

Select Image

14

inspect element showing like this
Screenshot_14

15 
please execute these code in ts and reply the output which is displayed in console.
console.log(this.mydata[0].image1);
this.http.get(this.baseurl+this.user_id)
      .subscribe((res:Response)=>{
      let dataTemp = res.json(); //dataTemp is the json object you showed me
      this.mydata = dataTemp.GetAds; //contains a [] object with all yours user
      console.log(this.mydata[0].image1);
    }
16

reply

17

getting the output from console like this
Screenshot_15

18

i’m testing https://www.base64decode.net/base64-image-decoder there my base64 string working file there but am not able to shoe the base64 string to image in app

19

Please go through these…

//html code
<img style=“height:120px; width:110px” [src]=“domSanitizer.bypassSecurityTrustUrl(img.image1)” alt=“Select Image”/>

//ts code
import {DomSanitizer} from “@angular/platform-browser”;
constructor(private domSanitizer: DomSanitizer) {}

20

nothing happened
showing only alter text Select Image