Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

388
Views
How to display image name in Ant design <Image.PreviewGroup> component?
<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 Screenshot

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

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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 />);
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!