Ion-image isn't showing image in ionic 3

0
votes

I am trying to show an Image using tag but the Image is not showing the url is working and there is no warning or error telling if I am doing something wrong My code is 

 <ion-img  style="height: 101px;width: 33vw;" src="{{product.images[0].img}}" class="thumbnail-image" (click)="selectedArticle(product)" ></ion-img>

And I am getting the image url in Base64 src like this

data:image/png;base64,iVBORw0K

I don't know if ion-image supports this url or not.

Any help would be appreciated.

1
angularionic-frameworkionic2ionic3
It should work, please can you create a demo stackblitz for this? - AT82

1 Answers

0
votes

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