我正在使用 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,但它们都不起作用。大家有什么建议吗?