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 });
    }
}