How to convert base64 to image


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

#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’”/>


#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…


#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


#17

getting the output from console like this


#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