Fix missing preview for images

public/admin/preview.css

@@ -482,8 +482,3 @@ button:hover .arrow {
   margin-top: 0;
   padding-top: 3rem;
 }
-
-/* Sveltia wraps the image preview in a paragraph */
-.page-figure p {
-  margin: 0;
-}

scripts/preview-styles.mjs

@@ -21,11 +21,6 @@ const preview = [
 .page-hero {
   margin-top: 0;
   padding-top: 3rem;
-}
-
-/* Sveltia wraps the image preview in a paragraph */
-.page-figure p {
-  margin: 0;
 }`,
 ];
 writeFileSync(new URL('../public/admin/preview.css', import.meta.url),

src/pages/admin/index.astro

@@ -40,11 +40,28 @@ const previewNames = examples.map(({ slug }) => slug);
       // PageHero.astro, without field labels. Sveltia looks templates up by
       // file name for file collections, so register one per Example page.
       const { h, rf } = window;
-      const PagePreview = ({ entry, widgetFor }) => {
+      // Our own <img>: Sveltia's image widget keeps the image transparent until
+      // a visibility check that does not complete inside a custom template.
+      // The asset URL starts as the public path and becomes a blob URL once
+      // Sveltia has fetched the file, which covers images not deployed yet.
+      const PreviewImage = ({ asset, fallback, alt }) => h('img', {
+        src: asset ? String(asset) : fallback,
+        alt,
+        onError: ({ currentTarget: img }) => {
+          const retry = (tries) => {
+            const url = asset && String(asset);
+            if (url && url !== img.getAttribute('src')) img.src = url;
+            else if (tries) setTimeout(() => retry(tries - 1), 500);
+          };
+          retry(10);
+        },
+      });
+      const PagePreview = ({ entry, widgetFor, getAsset }) => {
         const get = (key) => entry.getIn(['data', key]);
         const title = get('title') || '';
         const introduction = get('introduction');
         const image = get('image');
+        const imageAlt = get('imageAlt') || '';
         const imageCaption = get('imageCaption');
         const buttonLabel = get('buttonLabel');
         const buttonUrl = get('buttonUrl');
@@ -60,7 +77,7 @@ const previewNames = examples.map(({ slug }) => slug);
               introduction && h('p', { className: 'page-hero__lead' }, introduction))),
           image && h('div', { className: 'container' },
             h('figure', { className: 'page-figure' },
-              widgetFor('image'),
+              h(PreviewImage, { key: image, asset: getAsset(image), fallback: image, alt: imageAlt }),
               imageCaption && h('figcaption', null, imageCaption))),
           h('article', { className: image ? 'container prose' : 'container prose prose--no-image' },
             widgetFor('body'),