求助：在Rails中用Importmap引入PhotoSwipe遇灯箱异常问题

1. 解决页面加载时灯箱自动打开的问题 #

当前代码在turbo:load事件中初始化Lightbox，页面加载时灯箱自动打开，大概率是选择器匹配逻辑或重复初始化导致：

• 检查#existing-files容器下的.gal元素，确认没有默认绑定的自动触发事件，或HTML结构无错误。
• 避免Turbo页面切换时重复初始化，可添加实例标记或销毁旧实例：

  document.addEventListener("turbo:load", function() {
    // 销毁已存在的实例，防止重复初始化
    if (window.pswpLightbox) {
      window.pswpLightbox.destroy();
    }
  
    const lightbox = new PhotoSwipeLightbox({
      gallery: '#existing-files',
      children: '.gal',
      pswpModule: () => import('photoswipe')
    });
    lightbox.init();
    window.pswpLightbox = lightbox;
  });
  

2. 修复图片缺失的问题 #

图片无法加载通常是未提供正确的图片源与尺寸信息，PhotoSwipe依赖明确的原图地址和宽高：

• 确保每个.gal元素包含href（指向原图）、data-pswp-width和data-pswp-height（原图实际宽高），示例HTML：

  <div id="existing-files">
    <a href="/path/to/original-image.jpg" class="gal" data-pswp-width="1920" data-pswp-height="1080">
      <img src="/path/to/thumbnail.jpg" alt="示例图片">
    </a>
  </div>
  

• 若需动态获取尺寸，可通过getThumbnailBoundsFn自定义逻辑：

  const lightbox = new PhotoSwipeLightbox({
    gallery: '#existing-files',
    children: '.gal',
    pswpModule: () => import('photoswipe'),
    getThumbnailBoundsFn: (index) => {
      const thumbnail = document.querySelectorAll('.gal')[index];
      const rect = thumbnail.getBoundingClientRect();
      return { x: rect.left, y: rect.top, w: rect.width };
    }
  });
  

3. 确保pswpModule动态导入生效 #

在Importmap环境中，需确认模块映射与导入逻辑正确：

• 执行./bin/importmap json命令，检查输出中photoswipe的映射路径是否正常。
• 临时改用直接导入测试是否生效，排除动态导入的环境问题：

  import PhotoSwipeLightbox from 'photoswipe';
  import PhotoSwipe from 'photoswipe';
  
  document.addEventListener("turbo:load", function() {
    const lightbox = new PhotoSwipeLightbox({
      gallery: '#existing-files',
      children: '.gal',
      pswpModule: () => Promise.resolve(PhotoSwipe)
    });
    lightbox.init();
  });
  

  若此方式正常，可尝试重启服务器、清除浏览器缓存解决Importmap缓存问题。

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