1

I'm building an e-commerce using Angular5 and Google Cloud Firestore as Database. In the products page, I want to zoom a photo when the mouse hover the picture. Here's the problem:

As a zoom library, I'm using angular2-image-zoom. It works fine with images that are inside of my project, but when I pass a external image source (coming from Firebase storage, it doesn't work).

Code example:

product-page.component.ts

  // This example doesn't work
    <img  
      class="img-responsive"
      [imageZoom]="externalPhoto" // ~>https://firebasestorage.googleapis.com/v0/... 
      [src]="externalPhoto" 
      [style.width.px]="width" 
      [style.height.px]="height">

  //This example works fine
  <img 
    class="img-responsive"
    [imageZoom]="logoSrc" // ~>'assets/img/shared/logo.png';
    [src]="logoSrc" 
    [style.width.px]="width" 
    [style.height.px]="height"
  >

I already try all kind of DomSanitizer to bypass url, style, secureSrc but none of them worked. Do you guys have some suggestion?

ReyAnthonyRenacia
  • 17,219
  • 5
  • 37
  • 56
lucianokrebs
  • 831
  • 1
  • 12
  • 15
  • Does it work without the zoom lib? Ie. you can see an image? – funkizer May 01 '18 at 18:44
  • 1
    Found at least one potential bug in the lib you're using: If the image is cached, it doesn't do anything because the load event is never triggered (at least in some browsers). https://github.com/brtnshrdr/angular2-image-zoom/blob/c557576286d39d832f020011adf8445e2adb0ad9/src/image-zoom.directive.ts#L72 – funkizer May 01 '18 at 18:58
  • 1
    Should trigger the load event callcack manually if this.img.complete – funkizer May 01 '18 at 18:59
  • So does it work if you go to chrome devtools network tab and disable caching? – funkizer May 01 '18 at 19:00
  • @funkizer it works without the lib, yes. The only alternative I found was using another lib. This lib works fine ~> https://github.com/themyth92/angular2-lightbox with angular5. About the cache, my browser is already disabled... But, yes, there's a potential bug there. – lucianokrebs May 01 '18 at 22:39
  • Anyway, thank you so much for the effort to read and analyse my question! – lucianokrebs May 01 '18 at 22:52
  • Np. Glad you found an alternative, I'm guessing it was just a buggy lib :) – funkizer May 03 '18 at 16:50

0 Answers0