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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user