Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

397
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda