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,17 +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) {
-        resolve({
-          ok: false,
-          status: 401,
-          statusText: 'Unauthorized',
-          error: 'No authentication token available',
-        });
+        // Allow browser to load publicly-accessible URLs without authentication
+        // Fall through to Image() approach with resolved URL
+        const resolvedUrl = resolveImageUrl(url);
+
+        checkImageWithImageElement(resolvedUrl, resolve);
         return;
       }
 
@@ -37,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) => {
@@ -50,59 +96,22 @@ export const checkImage = async (url: string) => {
               });
             });
           } else {
-            resolve({
-              ok: false,
-              status: response.status,
-              statusText: response.statusText,
-              error: `Failed to fetch image: ${response.statusText}`,
-            });
+            console.error('Authenticated image fetch failed', response.status, 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',
-          });
+          console.error('Failed to fetch authenticated image', error);
+          // 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);
   });
 };