problem with image blobs

[beshad]

hi, doesn't this library work with image blobs? my photos are store in DB using Gridfs and can safely show them using <img [src]="_DomSanitizationService.bypassSecurityTrustUrl(thumb)"> but i get console error when i try this:

<ngx-image-zoom
    [thumbImage]=_DomSanitizationService.bypassSecurityTrustUrl(thumb)
></ngx-image-zoom>

WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding: data:text/xml;base64,/9j/4QbwRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagE ...

and

unsafe:SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss):1 GET unsafe:SafeValue must use [property]=binding: undefined (see http://g.co/ng/security

am i doing something wrong here?

thank you

[wittlock]

I started out using it myself with image blobs and that worked. But I did discover an issue with XML-encoded images (SVG images, when I tried it), as per #1

I haven't really had a chance to look into what's causing it especially since I moved away from using image blobs in my own project where I'm using this module.

[alexraju91]

I'm facing the same issue as @beshad mentioned.

[wittlock]

This might have been resolved as of version 0.3.4, I haven't had a chance to test myself yet, but give it a go and let me know if it works. Otherwise I'll keep #1 around to test and fix it.

[b4z81]

try this solution: _DomSanitizationService.bypassSecurityTrustResourceUrl(thumb);

[vfioox]

Still happens! Kinda ruins the experience here.

[suarezafelipe]

I was able to find a workaround:

<lib-ngx-image-zoom
  [thumbImage]="image"
  (imagesLoaded)="onImagesLoaded($event)"
></lib-ngx-image-zoom>

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  @ViewChild(NgxImageZoomComponent) imageZoom: NgxImageZoomComponent;
  image: SafeUrl;
  
  ngOnInit(): void {
  this.image = getImageUrl();
  }

  onImagesLoaded(status: boolean) {
    if (status) {
      const imgElement = this.imageZoom.imageThumbnail.nativeElement as HTMLImageElement;
      imgElement.style.width = '100%';
      imgElement.style.height = 'auto';
    }
  }
  
  getImageUrl(): SafeUrl {
		const blob = this.dataURItoBlob(this.src as string);
		const url = URL.createObjectURL(blob);
		
		return this.sanitizer.bypassSecurityTrustUrl(url);
	}

	dataURItoBlob(dataURI: string): Blob {
		const byteString = atob(dataURI.split(',')[1]);
		const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
		const ab = new ArrayBuffer(byteString.length);
		const ia = new Uint8Array(ab);
		for (let i = 0; i < byteString.length; i++) {
			ia[i] = byteString.charCodeAt(i);
		}
		return new Blob([ab], { type: mimeString });
	}
}