fix: handle empty covers and zero-valued close icons

src/Image.tsx

@@ -1,4 +1,4 @@
-import { isReactRenderable, useControlledState } from '@rc-component/util';
+import { isNonNullable, isReactRenderable, useControlledState } from '@rc-component/util';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import { useContext, useMemo, useState } from 'react';
@@ -43,8 +43,10 @@ export interface PreviewConfig extends Omit<InternalPreviewConfig, 'countRender'
 
 export type SemanticName = 'root' | 'image' | 'cover';
 
-export interface ImageProps
-  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick' | 'onKeyDown'> {
+export interface ImageProps extends Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'placeholder' | 'onClick' | 'onKeyDown'
+> {
   // Misc
   prefixCls?: string;
   previewPrefixCls?: string;
@@ -127,15 +129,17 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     ...restProps
   }: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
 
-  const coverPlacement =
-    typeof cover === 'object' && (cover as CoverConfig).placement
-      ? (cover as CoverConfig).placement || 'center'
-      : 'center';
-
-  const coverNode =
-    typeof cover === 'object' && (cover as CoverConfig).coverNode
-      ? (cover as CoverConfig).coverNode
-      : (cover as React.ReactNode);
+  // Identify the config by its shape, independently of its node's content.
+  const coverConfig =
+    isNonNullable(cover) &&
+    typeof cover === 'object' &&
+    ('coverNode' in cover ||
+      'placement' in cover ||
+      (Object.getPrototypeOf(cover) === Object.prototype && Reflect.ownKeys(cover).length === 0))
+      ? (cover as CoverConfig)
+      : undefined;
+  const coverPlacement = coverConfig?.placement || 'center';
+  const coverNode = coverConfig ? coverConfig.coverNode : (cover as React.ReactNode);
 
   // ============================ Open ============================
   const [isShowPreview, setShowPreview] = useControlledState(!!previewOpen, previewOpen);
@@ -243,7 +247,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         onClick={canPreview ? onPreview : onClick}
         role={canPreview ? 'button' : otherProps.role}
         tabIndex={canPreview && otherProps.tabIndex == null ? 0 : otherProps.tabIndex}
-        aria-label={canPreview ? otherProps['aria-label'] ?? alt : otherProps['aria-label']}
+        aria-label={canPreview ? (otherProps['aria-label'] ?? alt) : otherProps['aria-label']}
         onKeyDown={onPreviewKeyDown}
         style={{
           width,

src/Preview/index.tsx

@@ -1,6 +1,12 @@
 import CSSMotion from '@rc-component/motion';
 import Portal, { type PortalProps } from '@rc-component/portal';
-import { KeyCode, useEvent, useLayoutEffect, useLockFocus } from '@rc-component/util';
+import {
+  isReactRenderable,
+  KeyCode,
+  useEvent,
+  useLayoutEffect,
+  useLockFocus,
+} from '@rc-component/util';
 import { clsx } from 'clsx';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { PreviewGroupContext } from '../context';
@@ -474,7 +480,9 @@ const Preview: React.FC<PreviewProps> = props => {
               {closeIcon !== false && closeIcon !== null && (
                 <CloseBtn
                   prefixCls={prefixCls}
-                  icon={closeIcon === true ? icons.close : closeIcon || icons.close}
+                  icon={
+                    closeIcon !== true && isReactRenderable(closeIcon) ? closeIcon : icons.close
+                  }
                   onClick={onClose}
                   className={classNames.close}
                   style={styles.close}

tests/renderability.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { render } from '@testing-library/react';
+import Image from '../src';
+
+describe('ReactNode renderability', () => {
+  it.each([0, false, null, undefined, ''])('renders a configured cover node %s', coverNode => {
+    const { container } = render(
+      <Image src="image.png" preview={{ cover: { coverNode, placement: 'top' } }} />,
+    );
+    expect(container.querySelector('.rc-image-cover-top').textContent).toBe(
+      coverNode === 0 ? '0' : '',
+    );
+  });
+
+  it.each([null, {}])('accepts an empty cover %s', cover => {
+    const { container } = render(<Image src="image.png" preview={{ cover }} />);
+    expect(container.querySelector('.rc-image-cover').textContent).toBe('');
+  });
+
+  it('preserves element, array and portal covers', () => {
+    const target = document.createElement('div');
+    const covers = [<span key="a">A</span>, [<span key="a">A</span>], createPortal('A', target)];
+    const { container, rerender } = render(
+      <Image src="image.png" preview={{ cover: covers[0] }} />,
+    );
+    expect(container.querySelector('.rc-image-cover').textContent).toBe('A');
+    rerender(<Image src="image.png" preview={{ cover: covers[1] }} />);
+    expect(container.querySelector('.rc-image-cover').textContent).toBe('A');
+    rerender(<Image src="image.png" preview={{ cover: covers[2] }} />);
+    expect(target.textContent).toBe('A');
+  });
+
+  it.each([0, false, null, true, undefined])('preserves the close icon %s', closeIcon => {
+    const { baseElement } = render(
+      <Image src="image.png" preview={{ open: true, closeIcon, icons: { close: 'DEFAULT' } }} />,
+    );
+    const button = baseElement.querySelector('.rc-image-preview-close');
+    if (closeIcon === false || closeIcon === null) {
+      expect(button).toBeNull();
+    } else {
+      expect(button.textContent).toBe(closeIcon === 0 ? '0' : 'DEFAULT');
+    }
+  });
+});