angular - 使用第三方库缩放图像时，Angular5 / Firebase 存储不起作用

Question

我正在使用 Angular5 和 Google Cloud Firestore 作为数据库来构建电子商务。在产品页面中，我想在鼠标悬停图片时缩放照片。这是问题所在：

作为缩放库，我使用的是angular2-image-zoom。它适用于我项目内部的图像，但是当我传递外部图像源（来自 Firebase 存储时，它不起作用）。

代码示例：

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

我已经尝试过各种 DomSanitizer 来绕过 url、style、secureSrc，但它们都不起作用。大家有什么建议吗？

标签： angularfirebaseangular5firebase-storageangular-dom-sanitizer