# 实验性 PhotoSwipeLightbox 组件出现意外缩放，破坏了原始图像的比例

**URL:** <https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788>\
**Category:** UX\
**Created:** [2025年十月27日 06:04 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788 "2025-10-27T06:04:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/579066_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)\
**Post date:** [2025年十月27日 06:04 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/1 "2025-10-27T06:04:44Z")

</div>

> <https://github.com/discourse/discourse/pull/35616>
>
> The new experimental \`PhotoSwipeLightbox\` (siteSettings.experimental\_lightbox) c…ontain bugs when the image link exists in \`Discourse Solved\` or the upload component in \`admin/config/logo\`. The root cause is that \`PhotoSwipeLightbox\` need width and height from the already-loaded image, while \`Discourse Solved\` and the upload component don't have these attributes.
> 
> Without these attributes, the image will be stretched to fill the browser window, causing distortion, as shown in the figure attached.
> 
> This commit add a preload mechanism for images without dimensions to get their dimensions, so that they can be displayed normally.
> 
> Before fix:
> \`upload component\`
> \<img width="1600" height="801" alt="image" src="https://github.com/user-attachments/assets/ad1eb80d-a348-412a-a3d3-75701c97f6a4" /\>
> 
> \`Discourse Solved\`
> \<img width="1007" height="484" alt="image" src="https://github.com/user-attachments/assets/20d227c7-2539-463a-903d-4a83d8782460" /\>
> \<img width="1919" height="914" alt="image" src="https://github.com/user-attachments/assets/d0c8ef5f-05a6-48dc-b507-94b796b095b9" /\>
> 
> After fix:
> \`upload component\`
> \<img width="1603" height="758" alt="image" src="https://github.com/user-attachments/assets/03302997-9a43-425d-a7df-c218961a377a" /\>
> 
> \`Discourse Solved\`
> \<img width="1603" height="760" alt="image" src="https://github.com/user-attachments/assets/ced4355a-8818-4ef5-bce2-cb632165e3a9" /\>

新的实验性 `PhotoSwipeLightbox`（siteSettings.experimental\_lightbox）在图片链接存在于 `Discourse Solved` 或 `admin/config/logo` 中的上传组件时存在错误。根本原因是 `PhotoSwipeLightbox` 需要从已加载的图片中获取宽度和高度，而 `Discourse Solved` 和上传组件没有这些属性。

没有这些属性，图片将被拉伸以填满浏览器窗口，导致失真，如图所示。

此提交添加了一种预加载机制，用于获取没有尺寸的图片的尺寸，以便它们可以正常显示。

---

<div class="post-metadata">

**Author:** ![davidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidb/32/554671_2.png) [@davidb](https://meta.discourse.org/u/davidb)\
**Post date:** [2025年十一月11日 09:30 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/2 "2025-11-11T09:30:31Z")

</div>

感谢您报告此问题并分享修复方案。

我在 PR 中添加了一些评论/建议，但总的来说，我认为我们需要一个像这样的后备方案来处理边缘情况。

---

<div class="post-metadata">

**Author:** ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/579066_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)\
**Post date:** [2025年十一月12日 04:31 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/4 "2025-11-12T04:31:26Z")

</div>

好的，谢谢。我有空时会相应地在评论中加入见解。

```ruby
  context "当缺少数据属性时" do
    it "预加载图片并设置尺寸" do
      upload_1.update(width: 400, height: 300)
      post.update(
        cooked:
          "<p><a href=\"#{upload_1.url}\" class=\"lightbox\" data-download-href=\"#{upload_1.url}\">[image]</a></p>",
      )

      topic_page.visit_topic(topic)
      lightbox_link = find("#post_1 a.lightbox")
      expect(lightbox_link["data-target-width"]).to be_nil
      expect(lightbox_link["data-target-height"]).to be_nil
      lightbox_link.click

      expect(lightbox).to be_visible

      expect(lightbox_link["data-target-width"]).to eq(upload_1.width.to_s)
      expect(lightbox_link["data-target-height"]).to eq(upload_1.height.to_s)
    end
  end

```

我将此添加到 `lightbox_spec.rb` 中，作为针对无尺寸图片的单元测试，这样看起来可以吗？

---

<div class="post-metadata">

**Author:** ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/579066_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)\
**Post date:** [2025年十一月12日 15:06 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/5 "2025-11-12T15:06:02Z")

</div>

此外，我还对判别逻辑进行了一些修改，以处理那些具有元数据但元数据未能包含大小信息的（例如，上传组件）。

```plaintext
const missingMetaData = !item
    .querySelector(".meta")
    ?.textContent.trim()
    .split(/x|×/)
    .every((v) => v && +v > 0);

```

---

<div class="post-metadata">

**Author:** ![davidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidb/32/554671_2.png) [@davidb](https://meta.discourse.org/u/davidb)\
**Post date:** [2025年十一月20日 07:18 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/6 "2025-11-20T07:18:54Z")

</div>

感谢您为此付出的努力并跟进拉取请求（PR）的审查。我现在已将其合并。

---

<div class="post-metadata">

**Author:** ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/579066_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)\
**Post date:** [2025年十一月27日 14:42 UTC](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788/7 "2025-11-27T14:42:37Z")

</div>

@davidb 看起来最近对灯箱组件的提交存在一个错误，阻止了组件在 discourse solved 等项目中启动。  
这个问题可能与此提交有关  
[FIX: maintain extension when quoting images by SamSaffron · Pull Request #36240 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/36240), [Pull requests · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull)  
/36214。我不太确定。  
现在可以在这里重现问题。  
[Unexpected latest listing](https://meta.discourse.org/t/unexpected-latest-listing/389423)  
比如点击给定页面中引用或 discourse solved 组件里的 [IMG\_6085]。