Click here to Skip to main content
15,868,134 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i am binding a base64 image to the UI.which is in a loop.but image is not binding,while inspect element i can c the image but not rendering

Db is not returning
data:image/jpg;base64,
so i added in html

while inspect elenment im getting
"data:image/jpeg;base64,/9j/4A
but it is not rendering.Any Idea????

What I have tried:

<pre><td>
<span>{{ m.Name }}</span>
</td>
<td>
<!--<img style="width:100px;height:100px" [src]="imageData1">-->
<img [src]="'data:image/jpg;base64,'+m.ImageData" style="height:50px;width:50px" />
</td>
<td>
<span>{{m.Age }}</span>
Posted
Updated 23-Jun-23 22:31pm
Comments
Richard Deeming 4-Aug-17 10:12am    
Is that literally what you're seeing in the developer tools? /9j/4A is not a valid Base64 string, so it's not surprising that you're not seeing an image!

What's in m.ImageData?
[no name] 29-Aug-17 2:38am    
"data:image/jpeg;base64,/9j/4A----------here wen i moved the cursor i can see the image but not rendering to UI.

"m" means let m of array ie; m.name,m.image

Use _sanitizer.bypassSecurityTrustUrl to tell angular src value is safe

You can change your code like below.

Import DomSanitizer
import { DomSanitizer } from '@angular/platform-browser';


Inject this dependency in to the contructor
constructor(private domSanitizer: DomSanitizer) { }


myReader.onloadend = (e) => {
     this.base64Image = domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }
 
Share this answer
 
Comments
Robert Everett 4-Sep-18 4:55am    
This doesn't work:
DomSanitizer.bypassSecurityTrustUrl(string) will only accept a string
Lahiru Gambheera 25-Feb-19 23:46pm    
Worked...! Thanks a lot
//Yes, /9j/4A decodes to the JPEG header ÿØÿà, but the rest of the binary data in the Base64 string is likely different. When a browser decodes the Base64 image data URL, it is expecting a proper JPEG image format with a valid header and no corruption. If the Base64 string contains binary data that does not correspond to a proper JPEG, the decoding will likely fail or result in a corrupted image or a blank page.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:32px;height:32px;' id='codeproject'
       src='data:image/jpeg;base64, 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' />
  </body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900