How to display image name in Ant design <Image.PreviewGroup> component?

Question

<Image.PreviewGroup>
    <Image
      width={200}
      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
    />
    <Image
      width={200}
      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
    />
  </Image.PreviewGroup>

I want display current image name as shown in the following screenshot:

Note: I'm using antd: v4.16.13

Reference: https://ant.design/components/image/#components-image-demo-preview-group

Answer 1

I think there is no official API to do this.

You can do this as an workaround. Instead of rendering the Count Numbers, you can display your Image Names.

const { createRoot } = ReactDOM;
const { Image } = antd;

const App = () => {

  const names = ["First Image", "Second Image"];

  return (
    <Image.PreviewGroup
      preview={{
        countRender: (current) => names[current - 1]
      }}
    >
      <Image
        width={200}
        src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
      <Image
        width={200}
        src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
      />
    </Image.PreviewGroup>
  );
};

const Demo = App;

createRoot(mountNode).render(<Demo />);