# 실험적 PhotoSwipeLightbox 컴포넌트에서 예상치 못한 스케일링으로 원본 이미지의 비율이 깨짐

**URL:** https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788
**Category:** UX
**Created:** [10월 27, 2025, 6: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:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [11월 27, 2025, 2: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 최근 lightbox 컴포넌트에 대한 커밋 중 하나에 버그가 있는 것 같습니다. 이 버그는 제 PR이 병합된 후 discourse solved 및 기타 항목에서 컴포넌트가 시작되지 못하게 하는 문제를 일으키고 있습니다.

이 문제는 다음 커밋과 관련이 있을 수 있습니다.

[FEATURE: allow quoting an image from the lightbox - Pull Request #36156 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/36156).

이 PR이 실제로 해당 문제를 일으키는지 확신은 없습니다.

재현 방법은 지금 여기서 바로 할 수 있습니다.

> [@예상치 못한 최신 목록](https://meta.discourse.org/t/unexpected-latest-listing/389423):
>
> This one: Why are those two topics the first ones? There isn’t new or unread posts. Just out of curiosity.

예를 들어, onebox 인용문에서 [IMG\_6085]를 클릭하거나, 링크를 열어 해당 페이지의 discourse solved 컴포넌트에서 답변의 이미지를 클릭하는 경우입니다. 원래 동작은 라이트박스가 열리는 것이었지만, 지금은 아무 일도 일어나지 않습니다.

콘솔에는 다음 오류가 표시됩니다: `Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')`

관련된 코드는 다음과 같습니다:

```js
// this ensures that cropped images (eg: grid) do not cause jittering when closing
data.thumbCropped = true;

data.src = data.src || el.getAttribute("data-large-src");
-> data.origSrc = imgEl.getAttribute("data-orig-src");
data.title = el.title || imgEl.alt || imgEl.title;

```

아마도 코드를 다음과 같이 변경하면 해결될 수 있습니다:

```js
data.origSrc = imgEl?.getAttribute("data-orig-src") || el.getAttribute("data-orig-src") || null;

data.base62SHA1 =
    imgEl?.getAttribute("data-base62-sha1") || el.getAttribute("data-base62-sha1") || null;

data.targetWidth =
    el.getAttribute("data-target-width") || imgEl?.getAttribute("width") || null;
data.targetHeight =
    el.getAttribute("data-target-height") || imgEl?.getAttribute("height") || null;

```

PR 수정이 여기에 적용되었습니다:

> <https://github.com/discourse/discourse/pull/36310>
>
> \#36156 introduced \`const imgEl = el.tagName === "IMG" ? el : el.querySelector("…img");\` to the lightbox component to capture the image element on the page.
> 
> However, when it comes to applying the lightbox to an element without \`\<img\>\` , i.e., discourse solved, backquote, activity page, etc. The \`imgEl\` will turn into null, and the following \`data.origSrc = imgEl.getAttribute("data-orig-src");\` will result in \`Uncaught TypeError: can't access property "getAttribute", imgEl is null\`, preventing the lightbox from starting properly.
> 
> This commit add a safety check when \`imgEl\` is used, and add fallback logic to null if the \`\<img\>\` element doesn't exist.
> 
> Before:
> \<img width="1603" height="845" alt="image" src="https://github.com/user-attachments/assets/6e588a00-53bf-410a-bbac-3f24a820d494" /\>
> 
> After:
> \<img width="1603" height="848" alt="image" src="https://github.com/user-attachments/assets/07868ade-0e1b-43d2-83cc-c2fec3da9109" /\>

---

_[View the full topic](https://meta.discourse.org/t/unexpected-scaling-in-experimental-photoswipelightbox-component-breaking-the-ratio-of-the-original-image/386788)._