fix: Avatar fallback bug (#25806)

* refactor: avatar code

* fix: Fix Avatar fallback bug

close #25801

* add blank

* update demo

components/avatar/__tests__/Avatar.test.js

@@ -158,4 +158,23 @@ describe('Avatar Render', () => {
     wrapper.simulate('mouseenter');
     expect(onMouseEnter).toHaveBeenCalled();
   });
+
+  it('fallback', () => {
+    const div = global.document.createElement('div');
+    global.document.body.appendChild(div);
+    const wrapper = mount(
+      <Avatar
+        shape="circle"
+        src="http://error.url"
+      >
+        A
+      </Avatar>,
+      { attachTo: div },
+    );
+    wrapper.find('img').simulate('error');
+    wrapper.update();
+    expect(wrapper).toMatchRenderedSnapshot();
+    wrapper.detach();
+    global.document.body.removeChild(div);
+  });
 });

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Avatar Render fallback 1`] = `
+<span
+  class="ant-avatar ant-avatar-circle ant-avatar-image"
+>
+  <img
+    src="http://error.url"
+  />
+</span>
+`;
+
 exports[`Avatar Render rtl render component should be rendered correctly in RTL direction 1`] = `
 <span
   class="ant-avatar ant-avatar-circle"

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -469,6 +469,25 @@ Array [
 ]
 `;
 
+exports[`renders ./components/avatar/demo/fallback.md correctly 1`] = `
+Array [
+  <span
+    class="ant-avatar ant-avatar-circle ant-avatar-image"
+  >
+    <img
+      src="http://abc.com/not-exist.jpg"
+    />
+  </span>,
+  <span
+    class="ant-avatar ant-avatar-circle ant-avatar-image"
+  >
+    <img
+      src="http://abc.com/not-exist.jpg"
+    />
+  </span>,
+]
+`;
+
 exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
 Array [
   <button

components/avatar/demo/fallback.md

@@ -0,0 +1,37 @@
+---
+order: 99
+title:
+  zh-CN: 图片不存在时
+  en-US: Fallback
+debug: true
+---
+
+## zh-CN
+
+图片不存在时，会回退到 `src`。
+
+## en-US
+
+图片不存在时，会回退到 `src`。
+
+```tsx
+import { Avatar } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Avatar
+      shape="circle"
+      src="http://abc.com/not-exist.jpg"
+    >
+      A
+    </Avatar>
+    <Avatar
+      shape="circle"
+      src="http://abc.com/not-exist.jpg"
+    >
+      ABC
+    </Avatar>
+  </>,
+  mountNode,
+);
+```

components/avatar/index.tsx

@@ -66,7 +66,6 @@ const Avatar: React.FC<AvatarProps> = props => {
   };
 
   React.useEffect(() => {
-    setScaleParam();
     setMounted(true);
   }, []);
 
@@ -77,7 +76,7 @@ const Avatar: React.FC<AvatarProps> = props => {
 
   React.useEffect(() => {
     setScaleParam();
-  }, [props.children, props.gap]);
+  }, [props.children, props.gap, props.size]);
 
   React.useEffect(() => {
     if (props.children) {
@@ -103,6 +102,7 @@ const Avatar: React.FC<AvatarProps> = props => {
     className,
     alt,
     draggable,
+    children,
     ...others
   } = props;
 
@@ -135,64 +135,58 @@ const Avatar: React.FC<AvatarProps> = props => {
         }
       : {};
 
-  let { children } = props;
+  let childrenToRender;
   if (src && isImgExist) {
-    children = (
+    childrenToRender = (
       <img src={src} draggable={draggable} srcSet={srcSet} onError={handleImgLoadError} alt={alt} />
     );
   } else if (icon) {
-    children = icon;
+    childrenToRender = icon;
+  } else if (mounted || scale !== 1) {
+    const transformString = `scale(${scale}) translateX(-50%)`;
+    const childrenStyle: React.CSSProperties = {
+      msTransform: transformString,
+      WebkitTransform: transformString,
+      transform: transformString,
+    };
+
+    const sizeChildrenStyle: React.CSSProperties =
+      typeof size === 'number'
+        ? {
+            lineHeight: `${size}px`,
+          }
+        : {};
+
+    childrenToRender = (
+      <span
+        className={`${prefixCls}-string`}
+        ref={(node: HTMLElement) => {
+          avatarChildrenRef.current = node;
+        }}
+        style={{ ...sizeChildrenStyle, ...childrenStyle }}
+      >
+        {children}
+      </span>
+    );
   } else {
-    const childrenNode = avatarChildrenRef.current;
-    if (childrenNode || scale !== 1) {
-      const transformString = `scale(${scale}) translateX(-50%)`;
-      const childrenStyle: React.CSSProperties = {
-        msTransform: transformString,
-        WebkitTransform: transformString,
-        transform: transformString,
-      };
-
-      const sizeChildrenStyle: React.CSSProperties =
-        typeof size === 'number'
-          ? {
-              lineHeight: `${size}px`,
-            }
-          : {};
-      children = (
-        <span
-          className={`${prefixCls}-string`}
-          ref={(node: HTMLElement) => {
-            avatarChildrenRef.current = node;
-          }}
-          style={{ ...sizeChildrenStyle, ...childrenStyle }}
-        >
-          {children}
-        </span>
-      );
-    } else {
-      const childrenStyle: React.CSSProperties = {};
-      if (!mounted) {
-        childrenStyle.opacity = 0;
-      }
-
-      children = (
-        <span
-          className={`${prefixCls}-string`}
-          style={{ opacity: 0 }}
-          ref={(node: HTMLElement) => {
-            avatarChildrenRef.current = node;
-          }}
-        >
-          {children}
-        </span>
-      );
-    }
+    childrenToRender = (
+      <span
+        className={`${prefixCls}-string`}
+        style={{ opacity: 0 }}
+        ref={(node: HTMLElement) => {
+          avatarChildrenRef.current = node;
+        }}
+      >
+        {children}
+      </span>
+    );
   }
 
   // The event is triggered twice from bubbling up the DOM tree.
   // see https://codesandbox.io/s/kind-snow-9lidz
   delete others.onError;
   delete others.gap;
+
   return (
     <span
       {...others}
@@ -202,7 +196,7 @@ const Avatar: React.FC<AvatarProps> = props => {
         avatarNodeRef.current = node;
       }}
     >
-      {children}
+      {childrenToRender}
     </span>
   );
 };