Images & media

Product images are blank

show-image, show-media, and show-thumbnail all require the <storesynk-product> context; outside it they render nothing (SSK-102). If they’re correctly nested but still blank, check you selected a media that exists - use main for the featured image or a valid index.

The thumbnail strip is missing or duplicated wrong

<show-thumbnail> is self-cloning: the index-less instance is the template that clones itself once per media item, and the engine assigns index to each clone. If you author index on the template yourself, you break the cloning (SSK-303). Write a single <show-thumbnail> with no index. Also note the strip hides itself when the product has one or zero media - that’s expected, not a bug.

Responsive images load the wrong size

<show-media> builds a srcset from its widths (default "400,800,1200,1600") and sizes attributes. If the browser picks an unexpected size, tune sizes to match your layout’s rendered width. <show-image> builds a responsive srcset too (same widths/sizes attributes) - the difference is show-media also handles video/3D/external-video, while show-image is image-only.

Product images blink / go grey briefly at hydration (SSR)

A server-rendered image visibly re-decoded when the client runtime took over. Fixed this version: <show-image> writes src/srcset/sizes only when the value changes and drops empty srcset/sizes (never writes ""), matching the server fill exactly - so the adopted <img> is byte-stable and the browser never re-runs source selection. If you still see a blink, upgrade the engine, and make sure the server fill and client use the same widths/sizes (a different sizes on the tag would legitimately change the attribute and re-decode).

---

Imported from the Storesynk skill v0.1.0 (references/known-issues.md). To change this page, change it there.