fix: stop claiming a 1x1 size for an image whose dimensions are unknown

An uploaded figure never appeared, and no request for it was ever made. The
resolver substituted 1x1 when an asset carried no dimensions, and a 1x1 box
with `loading="lazy"` never enters the viewport — so the browser had no reason
to fetch it. The image was not failing to load; it was never asked for.

Unknown dimensions now say so. The figure omits the attributes and loads
eagerly, letting the browser size the image from the file, and reserves layout
space only when the size is actually known. Guessing a number to fill an
attribute is what turned a missing measurement into a missing picture.
This commit is contained in:
DongHyeonka
2026-08-21 17:57:10 +09:00
parent 89a73c13c6
commit 348420618d
2 changed files with 19 additions and 23 deletions
@@ -53,8 +53,12 @@ export type ResolvedAssetLike = Readonly<{
function fromDescriptor(descriptor: ResolvedAssetLike): EvidenceAsset {
return Object.freeze({
src: descriptor.publicPath,
width: descriptor.width ?? 1,
height: descriptor.height ?? 1,
// 치수를 모르면 0 으로 둔다 — 1 이 아니라. 1×1 은 "아주 작은 그림" 이라는 거짓말이고,
// `loading="lazy"` 와 만나면 브라우저는 화면에 걸리지 않는 1×1 상자를 영영 가져오지 않는다.
// 실제로 업로드가 치수를 기록하지 않아 모든 그림이 그렇게 사라졌다. 0 은 figure 가
// 자기 값을 모른다는 뜻이고, 렌더러가 그때 속성을 빼고 즉시 로드로 바꾼다.
width: descriptor.width ?? 0,
height: descriptor.height ?? 0,
triggerLabel: `${descriptor.assetKey} 이미지 크게 보기`,
dialogLabel: `${descriptor.assetKey} 확대`,
});
@@ -30,16 +30,20 @@ export function PublicEvidenceFigure({
dialogRef.current?.close();
}
/**
* 치수를 아는 그림만 자리를 미리 잡는다. 모르는데 숫자를 적으면 그 상자가 진짜 크기가 되고,
* `loading="lazy"` 는 화면에 걸리지 않는 상자를 끝내 가져오지 않는다 — 그림이 통째로 사라진다.
* 모를 때는 속성을 빼고 즉시 로드해, 브라우저가 원래 크기로 그리게 둔다.
*/
const known = asset.width > 0 && asset.height > 0;
const sizing = known
? ({ width: asset.width, height: asset.height, loading: "lazy" } as const)
: ({ loading: "eager" } as const);
if (!zoom) {
return (
<figure className="evidence-figure">
<img
src={asset.src}
width={asset.width}
height={asset.height}
alt={alt}
loading="lazy"
/>
<img src={asset.src} alt={alt} {...sizing} />
<figcaption>{caption}</figcaption>
</figure>
);
@@ -56,13 +60,7 @@ export function PublicEvidenceFigure({
aria-describedby={descriptionId}
onClick={open}
>
<img
src={asset.src}
width={asset.width}
height={asset.height}
alt={alt}
loading="lazy"
/>
<img src={asset.src} alt={alt} {...sizing} />
<span> </span>
<span className="visually-hidden" id={descriptionId}>
{alt}
@@ -84,13 +82,7 @@ export function PublicEvidenceFigure({
<button type="button" className="dialog-close" onClick={close}>
</button>
<img
src={asset.src}
width={asset.width}
height={asset.height}
alt={alt}
loading="lazy"
/>
<img src={asset.src} alt={alt} {...sizing} />
<p>{caption}</p>
</div>
</dialog>