chore: fix check image

Author: appflowy

src/utils/image.ts

@@ -7,6 +7,52 @@ const resolveImageUrl = (url: string): string => {
   return url.startsWith('http') ? url : `${getConfigValue('APPFLOWY_BASE_URL', '')}${url}`;
 };
 
+// Helper function to check image using Image() approach
+const checkImageWithImageElement = (
+  imageUrl: string,
+  resolve: (data: {
+    ok: boolean,
+    status: number,
+    statusText: string,
+    error?: string,
+    validatedUrl?: string,
+  }) => void
+) => {
+  const img = new Image();
+
+  // Set a timeout to handle very slow loads
+  const timeoutId = setTimeout(() => {
+    resolve({
+      ok: false,
+      status: 408,
+      statusText: 'Request Timeout',
+      error: 'Image loading timed out',
+    });
+  }, 10000); // 10 second timeout
+
+  img.onload = () => {
+    clearTimeout(timeoutId);
+    resolve({
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      validatedUrl: imageUrl,
+    });
+  };
+
+  img.onerror = () => {
+    clearTimeout(timeoutId);
+    resolve({
+      ok: false,
+      status: 404,
+      statusText: 'Image Not Found',
+      error: 'Failed to load image',
+    });
+  };
+
+  img.src = imageUrl;
+};
+
 export const checkImage = async (url: string) => {
   return new Promise((resolve: (data: {
     ok: boolean,
@@ -15,47 +61,16 @@ export const checkImage = async (url: string) => {
     error?: string,
     validatedUrl?: string,
   }) => void) => {
-    // If it's an AppFlowy file storage URL, use authenticated fetch
+    // If it's an AppFlowy file storage URL, try authenticated fetch first
     if (isAppFlowyFileStorageUrl(url)) {
       const token = getTokenParsed();
 
       if (!token) {
         // Allow browser to load publicly-accessible URLs without authentication
         // Fall through to Image() approach with resolved URL
         const resolvedUrl = resolveImageUrl(url);
-        const img = new Image();
-
-        // Set a timeout to handle very slow loads
-        const timeoutId = setTimeout(() => {
-          resolve({
-            ok: false,
-            status: 408,
-            statusText: 'Request Timeout',
-            error: 'Image loading timed out',
-          });
-        }, 10000); // 10 second timeout
-
-        img.onload = () => {
-          clearTimeout(timeoutId);
-          resolve({
-            ok: true,
-            status: 200,
-            statusText: 'OK',
-            validatedUrl: resolvedUrl,
-          });
-        };
-
-        img.onerror = () => {
-          clearTimeout(timeoutId);
-          resolve({
-            ok: false,
-            status: 404,
-            statusText: 'Image Not Found',
-            error: 'Failed to load image',
-          });
-        };
-
-        img.src = resolvedUrl;
+
+        checkImageWithImageElement(resolvedUrl, resolve);
         return;
       }
 
@@ -67,6 +82,7 @@ export const checkImage = async (url: string) => {
         },
       })
         .then((response) => {
+          console.debug("fetchImageBlob response", response);
           if (response.ok) {
             // Convert to blob URL for use in img tag
             return response.blob().then((blob) => {
@@ -80,59 +96,20 @@ export const checkImage = async (url: string) => {
               });
             });
           } else {
-            resolve({
-              ok: false,
-              status: response.status,
-              statusText: response.statusText,
-              error: `Failed to fetch image: ${response.statusText}`,
-            });
+            // If authenticated fetch fails, fall back to Image() approach
+            // This allows publicly-accessible URLs to still work
+            checkImageWithImageElement(fullUrl, resolve);
           }
         })
-        .catch((error) => {
-          resolve({
-            ok: false,
-            status: 500,
-            statusText: 'Internal Error',
-            error: error.message || 'Failed to fetch image',
-          });
+        .catch(() => {
+          // If fetch throws an error (CORS, network, etc.), fall back to Image() approach
+          checkImageWithImageElement(fullUrl, resolve);
         });
       return;
     }
 
     // For non-AppFlowy URLs, use the original Image() approach
-    const img = new Image();
-
-    // Set a timeout to handle very slow loads
-    const timeoutId = setTimeout(() => {
-      resolve({
-        ok: false,
-        status: 408,
-        statusText: 'Request Timeout',
-        error: 'Image loading timed out',
-      });
-    }, 10000); // 10 second timeout
-
-    img.onload = () => {
-      clearTimeout(timeoutId);
-      resolve({
-        ok: true,
-        status: 200,
-        statusText: 'OK',
-        validatedUrl: url,
-      });
-    };
-
-    img.onerror = () => {
-      clearTimeout(timeoutId);
-      resolve({
-        ok: false,
-        status: 404,
-        statusText: 'Image Not Found',
-        error: 'Failed to load image',
-      });
-    };
-
-    img.src = url;
+    checkImageWithImageElement(url, resolve);
   });
 };