fix(rusty-image): derive arValue from arString for layout match
`arValue` (height computation) and `arString` (URL `ar=` param) used to read from different sources, so the URL could request a different aspect than the `<img>` element reserved — caused a visible flicker when the transformed image loaded. Both now derive from `arString`. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -71,14 +71,18 @@
|
||||
return w / h;
|
||||
}
|
||||
|
||||
const arValue = $derived(parseAr(aspect));
|
||||
const computedHeight = $derived(
|
||||
height ?? (arValue ? Math.round(width / arValue) : undefined),
|
||||
);
|
||||
// Derive aspect from either the explicit `aspect` prop or the width/height pair.
|
||||
// Both `arString` (URL `ar=` param) and `arValue` (height-derivation) must read
|
||||
// from the SAME source — otherwise the URL requests a different shape than the
|
||||
// `<img>` reserves and the image flickers when it loads.
|
||||
const arString = $derived(
|
||||
aspect ??
|
||||
(height && width ? `${width}/${height}` : undefined),
|
||||
);
|
||||
const arValue = $derived(parseAr(arString));
|
||||
const computedHeight = $derived(
|
||||
height ?? (arValue ? Math.round(width / arValue) : undefined),
|
||||
);
|
||||
const sizesAttr = $derived(sizes ?? `${width}px`);
|
||||
|
||||
function baseParams(format: "avif" | "webp" | "jpeg", w: number): RustyImageTransformParams {
|
||||
|
||||
Reference in New Issue
Block a user