Image

Компонент Image в библиотеке Ant Design предназначен для отображения изображений с возможностью масштабирования, предварительного просмотра и управления состоянием загрузки. Он является гибким инструментом для работы с изображениями в React-приложениях и интегрируется с другими компонентами Ant Design.

Основные свойства

• src – строка с URL изображения. Обязательное свойство.

• alt – текст для альтернативного отображения изображения, используется при недоступности файла.

• width / height – числовые значения ширины и высоты изображения. Можно использовать как фиксированные размеры, так и проценты.

• preview – объект или булевое значение, управляющее возможностью предварительного просмотра. Поддерживаются следующие свойства:

  • visible – контролирует видимость модального окна предварительного просмотра.
  • src – URL изображения для предварительного просмотра, может отличаться от основного.
  • mask – React-элемент, отображаемый при наведении на изображение.

• fallback – URL или компонент, отображаемый в случае ошибки загрузки изображения.

• onError – функция обратного вызова, срабатывающая при ошибке загрузки.

Пример базового использования

import { Image } from 'antd';

const App = () => (
  
);

В этом примере изображение будет иметь ширину 200 пикселей, а при недоступности файла можно использовать свойство fallback.

Предварительный просмотр изображений

Ant Design предоставляет встроенный модуль для просмотра изображений в увеличенном формате.

Посмотреть,
  }}
/>

Особенности предварительного просмотра:

• Поддерживается группировка изображений с помощью компонента Image.PreviewGroup.
• Модальное окно автоматически адаптируется под экран устройства.
• Можно управлять видимостью через состояние React (useState) для динамического открытия и закрытия.

Группы изображений (Image.PreviewGroup)

Компонент Image.PreviewGroup позволяет объединять несколько изображений в одну коллекцию для удобного просмотра:

import { Image } from 'antd';

const App = () => (
  
    
    
    
  
);

• Перелистывание осуществляется стрелками на модальном окне.
• Можно задать current для указания активного изображения при открытии.
• Поддерживаются события onChange и onVisibleChange.

Обработка ошибок и fallback

Свойство fallback обеспечивает корректное отображение интерфейса при ошибке загрузки:

• fallback может быть как URL изображения, так и React-элементом, что позволяет реализовать кастомные заглушки.
• Обработчик onError позволяет логировать ошибки или предпринимать дополнительные действия.

 console.log('Ошибка загрузки изображения')}
/>

Маска при наведении

Свойство preview.mask позволяет создавать интерактивный эффект при наведении курсора:

Нажмите для увеличения