NPM pro-gallery部署到线上站点后图片无法加载问题求助

这个问题是Gatsby生产环境构建后pro-gallery初始容器尺寸计算异常导致的：

• 生产环境下组件初始渲染时，pro-gallery读取到的容器宽高为0，判定当前视口内没有需要展示的图片，不会触发图片加载逻辑
• 打开开发者工具会触发全局resize事件，pro-gallery监听到事件后重新计算容器尺寸，才会正常加载视口内的图片
• 本地环境正常是因为开发模式下代码未压缩、热更新逻辑会额外触发组件重绘，刚好覆盖了初始计算错误的问题

• 方案1：禁用pro-gallery自带的懒加载逻辑，改用Gatsby官方的gatsby-plugin-image处理图片加载，适配Gatsby的生产资源构建规则
• 方案2：在画廊组件挂载完成后手动触发一次重绘，代码示例如下：

import { useEffect } from 'react'
import { ProGallery } from 'pro-gallery'

const GalleryComponent = ({ items }) => {
  useEffect(() => {
    // 组件挂载后手动触发resize事件，修正pro-gallery尺寸计算错误
    window.dispatchEvent(new Event('resize'))
  }, [])

  return <ProGallery items={items} /* 其余原有配置保持不变 */ />
}

• 方案3：给画廊外层容器设置固定最小宽高，避免初始渲染时容器尺寸为0，示例样式：

.gallery-wrapper {
  min-width: 100%;
  min-height: 500px;
}

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