admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rusty-image): derive arValue from arString for layout match

Browse Source 
`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:
Peter Meier
2026-04-28 13:20:59 +02:00
parent 9d1a7ab46d
commit 40b2d406ae
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/RustyImage.svelte
+8 -4
View File
@@ -71,14 +71,18 @@
return w / h; return w / h;
} }
const arValue = $derived(parseAr(aspect)); // Derive aspect from either the explicit `aspect` prop or the width/height pair.
const computedHeight = $derived( // Both `arString` (URL `ar=` param) and `arValue` (height-derivation) must read
height ?? (arValue ? Math.round(width / arValue) : undefined), // 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( const arString = $derived(
aspect ?? aspect ??
(height && width ? `${width}/${height}` : undefined), (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`); const sizesAttr = $derived(sizes ?? `${width}px`);
function baseParams(format: "avif" | "webp" | "jpeg", w: number): RustyImageTransformParams { function baseParams(format: "avif" | "webp" | "jpeg", w: number): RustyImageTransformParams {