feat: support Image element prop for Avatar component (#27448)

* feat: support Image element prop for Avatar component

* feat: reuse src prop instead of new image prop

* fix: update snapshot

* fix: re-update snapshots with latest dependencies

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

@@ -797,6 +797,18 @@ Array [
       src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
     />
   </span>,
+  <span
+    class="ant-avatar ant-avatar-circle ant-avatar-image"
+  >
+    <div
+      class="ant-image"
+    >
+      <img
+        class="ant-image-img"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      />
+    </div>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle"
     style="color:#f56a00;background-color:#fde3cf"

components/avatar/avatar.tsx

@@ -130,12 +130,14 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     [`${prefixCls}-sm`]: size === 'small',
   });
 
+  const hasImageElement = React.isValidElement(src);
+
   const classString = classNames(
     prefixCls,
     sizeCls,
     {
       [`${prefixCls}-${shape}`]: shape,
-      [`${prefixCls}-image`]: src && isImgExist,
+      [`${prefixCls}-image`]: hasImageElement || (src && isImgExist),
       [`${prefixCls}-icon`]: icon,
     },
     className,
@@ -152,10 +154,12 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
       : {};
 
   let childrenToRender;
-  if (src && isImgExist) {
+  if (typeof src === 'string' && isImgExist) {
     childrenToRender = (
       <img src={src} draggable={draggable} srcSet={srcSet} onError={handleImgLoadError} alt={alt} />
     );
+  } else if (hasImageElement) {
+    childrenToRender = src;
   } else if (icon) {
     childrenToRender = icon;
   } else if (mounted || scale !== 1) {

components/avatar/demo/type.md

@@ -14,7 +14,7 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
-import { Avatar } from 'antd';
+import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
@@ -23,6 +23,9 @@ ReactDOM.render(
     <Avatar>U</Avatar>
     <Avatar size={40}>USER</Avatar>
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar
+      src={<Image src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+    />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
   </>,

components/avatar/index.en-US.md

@@ -17,8 +17,8 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 | icon | Custom icon type for an icon avatar | ReactNode | - |  |
 | shape | The shape of avatar | `circle` \| `square` | `circle` |  |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
-| src | The address of the image for an image avatar | string | - |  |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
+| src | The address of the image for an image avatar or image element | string \| ReactNode | - |  |
 | srcSet | A list of sources to use for different screen resolutions | string | - |  |
 | onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
 

components/avatar/index.zh-CN.md

@@ -22,8 +22,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
-| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
-| src | 图片类头像的资源地址 | string | - |  |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
+| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - |  |
 | srcSet | 设置图片类头像响应式资源地址 | string | - |  |
 | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |