From 6195aa848ae1855fc0cc29253010b85c13cc20a7 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 9 Feb 2023 18:39:34 +0800
Subject: [PATCH] fix: fallback not working in ssr

---
 src/Image.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 5f42feac..0193ce36 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -52,6 +52,15 @@ interface CompoundedComponent<P> extends React.FC<P> {
 
 type ImageStatus = 'normal' | 'error' | 'loading';
 
+function isImageValid(src) {
+  return new Promise(resolve => {
+    let img = document.createElement('img');
+    img.onerror = () => resolve(false);
+    img.onload = () => resolve(true);
+    img.src = src;
+  });
+}
+
 const ImageInternal: CompoundedComponent<ImageProps> = ({
   src: imgSrc,
   alt,
@@ -123,9 +132,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   };
 
   const onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    if (onImageError) {
-      onImageError(e);
-    }
+    onImageError?.(e);
     setStatus('error');
   };
 
@@ -173,6 +180,14 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
     }
   };
 
+  React.useEffect(() => {
+    isImageValid(src).then(isValid => {
+      if (!isValid) {
+        setStatus('error');
+      }
+    });
+  }, [src]);
+
   // Keep order start
   // Resolve https://github.com/ant-design/ant-design/issues/28881
   // Only need unRegister when component unMount
@@ -239,7 +254,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
         <img
           {...imgCommonProps}
           ref={getImgRef}
-          {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
+          {...(isError && fallback ? { src: fallback } : { onLoad, src: imgSrc })}
           width={width}
           height={height}
         />