Angular5 结合Firebase Storage时第三方图片缩放库无法正常工作

我之前在做Angular电商项目时也碰到过一模一样的问题——angular2-image-zoom对本地图片完美生效，但加载Firebase Storage的外部图片时就完全没反应。折腾了半天终于找到问题根源和解决办法，分享给你：

问题根源 #

angular2-image-zoom的缩放逻辑是依赖图片的实际宽高来计算的，但Firebase Storage的图片是异步加载的：组件初始化时，图片还没下载完成，库就已经尝试读取图片尺寸了，结果拿到的是0，自然无法触发缩放效果。

解决方案一：监听图片加载完成后再初始化缩放 #

最直接的办法就是等图片完全加载完成后，再让库初始化缩放功能。可以通过监听图片的load事件来实现：

1. 修改模板文件（product-page.component.html） #

给img标签添加(load)事件绑定，同时用ViewChild获取缩放指令的实例：

<img 
  class="img-responsive"
  #zoomImage
  [imageZoom]="productImageUrl"
  (load)="onImageLoaded()"
  [src]="productImageUrl"
  alt="商品图片"
/>

2. 修改组件逻辑（product-page.component.ts） #

引入ViewChild和缩放指令，在图片加载完成后手动触发初始化：

import { Component, ViewChild, OnInit } from '@angular/core';
import { ImageZoomDirective } from 'angular2-image-zoom';

@Component({
  selector: 'app-product-page',
  templateUrl: './product-page.component.html',
  styleUrls: ['./product-page.component.css']
})
export class ProductPageComponent implements OnInit {
  productImageUrl: string;

  @ViewChild(ImageZoomDirective) imageZoom: ImageZoomDirective;

  ngOnInit() {
    // 这里从Firestore/Firebase Storage获取图片URL
    this.productImageUrl = 'https://firebasestorage.googleapis.com/v0/b/your-bucket/o/your-image.jpg?alt=media';
  }

  onImageLoaded() {
    // 图片加载完成后，重新初始化缩放指令
    if (this.imageZoom) {
      // 部分版本的库提供init()方法，直接调用即可
      this.imageZoom.init();

      // 如果init()方法不存在，用"重新赋值URL"的方式触发更新
      // const tempUrl = this.productImageUrl;
      // this.productImageUrl = null;
      // setTimeout(() => this.productImageUrl = tempUrl, 0);
    }
  }
}

解决方案二：检查Firebase Storage的CORS配置 #

如果上面的方法还是不行，可能是Firebase Storage的跨域资源共享（CORS）设置有问题。默认情况下Firebase Storage允许GET请求，但如果你的项目有特殊域名限制，需要手动配置：

1. 创建一个cors.json文件，内容如下：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

（如果只允许特定域名，把"*"换成你的域名，比如["https://your-shop.com"]）

2. 使用Google Cloud SDK的gsutil工具上传配置：

gsutil cors set cors.json gs://your-firebase-bucket-name

备选方案：换用更兼容的缩放库 #

如果angular2-image-zoom实在不好调试，可以考虑换成ngx-image-zoom（注意要安装Angular5兼容的版本，比如ngx-image-zoom@1.0.0），这个库对异步加载的图片支持更好，配置也更灵活。

或者你也可以自己实现简单的鼠标悬停缩放逻辑：通过监听mouseenter/mouseleave事件，动态修改图片的transform: scale()属性，这种方式完全可控，也不会依赖第三方库的问题。

内容的提问来源于stack exchange，提问作者lucianokrebs