Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

391
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda