Ionic 3- display base64 image, sanitizing unsafe url value safevalue must use [property]=binding

Question

I want to display base64 image for profile picture. The image is stored in database as binary data and I converted this binary data into base64 using btoa(). now I want to bind this base64 image to img src I tried many ways but it's not working, please help here is my code

profile.ts code:

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = imageData;
    }
}

profile.html code:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="data:Image/*;base64,{{displayImage}}">
</div>

It is showing an error "sanitizing unsafe url value safevalue must use [property]=binding"

https://stackoverflow.com/questions/43141534/angular2-base64-sanitizing-unsafe-url-value — Suraj Rao, Dec 23 '17 at 05:28
Possible duplicate of [Angular2 Base64 sanitizing unsafe URL value](https://stackoverflow.com/questions/43141534/angular2-base64-sanitizing-unsafe-url-value) — Suraj Rao, Dec 23 '17 at 05:28

score 7 · Answer 1 · answered Dec 23 '17 at 13:41

Add a sanitizer and sanitize the url before using it in template

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

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

in your template just:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>

score 3 · Answer 2 · answered Jul 19 '19 at 06:07

Add browser sanitizer and sanitize the url and rather then using src="{{your_variable}}" use [src]="your_variable". For example:

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

@Component({
  selector: 'app-image-modal',
  templateUrl: './image-modal.page.html'],
})
export class ImageModalPage {
  user_image: SafeResourceUrl;
  constructor( private sanitizer: DomSanitizer ) { }
  
  loadImage(){
    this.user_image = this.sanitizer.bypassSecurityTrustResourceUrl(/* your base64 string in here*');
  }
}

<img [src]="user_image" />

score 2 · Answer 3 · answered Jun 01 '18 at 12:48

2

If you don't want to store the data twice, you can put the metadata string right in the html. This worked better for my scenario

<div class="profile-picture big-profile-picture">
    <img src="{{'data:image/png;base64,' + imageData}}">
</div>

answered Jun 01 '18 at 12:48

Lucas Crandle

184
5

score 2 · Answer 4 · answered Nov 15 '18 at 23:29

2

In your typescript file, in CameraOptions you can replace FILE_URI by DATA_URL like this destinationType: this.camera.DestinationType.DATA_URL

answered Nov 15 '18 at 23:29

SANA Abdoul Aziz

423
4
14

score 0 · Answer 5 · answered Aug 16 '18 at 23:33

0

Try putting a public address for the URL, in case you have a server where they are saved, you must put the public address of your server and the password where the image is saved.

answered Aug 16 '18 at 23:33

Antonio Posada Magdaleno

23
1
9

Ionic 3- display base64 image, sanitizing unsafe url value safevalue must use [property]=binding

5 Answers5