From 676c0f1af877ed73cfc2d2198691d545ee960efe Mon Sep 17 00:00:00 2001
From: "DESKTOP-I1T6TF3\\Q" <2291969160@qq.com>
Date: Thu, 4 Jun 2026 15:08:39 +0800
Subject: [PATCH] fix(image): try fetching image as a blob directly first to
 avoid progressive rendering

---
 app/play/page.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/play/page.tsx b/app/play/page.tsx
index e920b8a..cdb5dae 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -151,28 +151,25 @@ function proxiedImageUrl(originalUrl: string): string {
 async function fetchImageAsBlobUrl(url: string): Promise<string> {
   if (url.startsWith("data:")) return url;
 
-  // Direct path (default): warm the cache + decode, hand back the original
-  // URL. No fetch() — im.runware.ai has no CORS, so fetch().blob() would throw.
-  if (!shouldProxy(url)) {
-    await preloadImage(url);
-    return url;
-  }
-
-  // Proxy path (opt-in): fetch through the Worker and materialize a blob: URL.
-  // On error / timeout fall back to the original URL so <img> still tries
-  // (possible progressive paint — same as the direct path, never worse).
+  // Try to fetch as blob first (direct if CORS-enabled, or through proxy if configured)
+  const targetUrl = shouldProxy(url) ? proxiedImageUrl(url) : url;
   const ctrl = new AbortController();
   const timer = setTimeout(() => ctrl.abort(), IMAGE_PRELOAD_TIMEOUT_MS);
   try {
-    const r = await fetch(proxiedImageUrl(url), { signal: ctrl.signal });
-    if (!r.ok) return url;
-    const blob = await r.blob();
-    return URL.createObjectURL(blob);
-  } catch {
-    return url;
+    const r = await fetch(targetUrl, { signal: ctrl.signal });
+    if (r.ok) {
+      const blob = await r.blob();
+      return URL.createObjectURL(blob);
+    }
+  } catch (e) {
+    console.warn("Direct blob fetch failed (CORS or network), falling back to preload:", e);
   } finally {
     clearTimeout(timer);
   }
+
+  // Fallback: warm the cache + decode, return the original CDN URL (may load progressively)
+  await preloadImage(url);
+  return url;
 }
 
 // Module-level cache so speculative prefetches and the eventual commit share