Компоненты Image, Fallback

Компонент Image в библиотеке Radix UI предназначен для корректного отображения изображений с поддержкой контроля состояния загрузки и падений контента. Он позволяет управлять отображением изображения и обеспечивать резервное содержимое в случае ошибок загрузки.

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

  • src — путь к изображению. Обязательный атрибут.
  • alt — альтернативный текст для доступности. Обязательный при использовании семантических изображений.
  • width / height — задают размеры изображения, помогают избежать смещения контента при загрузке.
  • onLoad — функция-обработчик события успешной загрузки изображения.
  • onError — функция-обработчик ошибок загрузки изображения.

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

import * as Image from '@radix-ui/react-image';

<Image.Root>
  <Image.Img src="/avatar.png" alt="Аватар пользователя" width={120} height={120} />
</Image.Root>

Особенности

  1. Обработка состояния загрузки В Radix UI Image не просто отображает картинку, но и отслеживает её состояние: загружено ли изображение, возникла ли ошибка. Это позволяет динамически отображать заглушки или анимации загрузки.

  2. Адаптивность и контроль размеров Использование width и height обеспечивает корректное резервирование пространства на странице, предотвращая «скачки» контента при асинхронной загрузке.

  3. Доступность Атрибут alt обязателен для всех изображений, которые несут смысловую нагрузку. Для декоративных изображений можно использовать пустую строку alt="", чтобы скринридеры игнорировали их.

Компонент Fallback

Fallback — это дочерний компонент Image.Root, который отображается, если изображение не удалось загрузить или оно отсутствует. Он обеспечивает визуальное резервирование и улучшает UX при нестабильных сетевых условиях.

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

  • children — может содержать любой React-контент: иконки, текстовые заглушки, спиннеры.
  • delayMs — время в миллисекундах перед отображением Fallback после начала загрузки. Позволяет избежать мерцания при быстрой загрузке изображения.

Пример использования с Fallback:

<Image.Root>
  <Image.Img src="/avatar.png" alt="Аватар пользователя" width={120} height={120} />
  <Image.Fallback delayMs={300}>
    <div style={{ width: 120, height: 120, backgroundColor: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      Загрузка...
    </div>
  </Image.Fallback>
</Image.Root>

Особенности

  1. Задержка отображения Атрибут delayMs помогает предотвратить ненужное появление Fallback на короткий момент при нормальной загрузке изображения.

  2. Гибкость содержимого Fallback поддерживает любые React-элементы: можно использовать SVG-иконки, CSS-анимации или даже другие Radix UI компоненты для создания кастомного резервного интерфейса.

  3. Компоновка и стилизация Fallback наследует размер контейнера Image.Root, что позволяет аккуратно интегрировать его в макет без дополнительного позиционирования.

Практические рекомендации

  • Всегда использовать alt для семантических изображений.
  • Настраивать width и height для предотвращения смещения контента.
  • Использовать Fallback с delayMs для улучшения визуального восприятия при медленной загрузке.
  • Стилизовать Fallback через inline-стили или CSS-модули для соответствия общему дизайну интерфейса.

Пример комплексного применения

<Image.Root>
  <Image.Img
    src="/profile.png"
    alt="Профиль пользователя"
    width={150}
    height={150}
    onEr ror={() => console.log('Ошибка загрузки изображения')}
  />
  <Image.Fallback delayMs={500}>
    <div style={{ width: 150, height: 150, backgroundColor: '#ccc', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>
      Нет изображения
    </div>
  </Image.Fallback>
</Image.Root>

Такой подход обеспечивает надежное отображение изображений, управление состояниями загрузки и элегантное резервное содержимое в случае ошибок, что делает интерфейсы более стабильными и доступными.

Оглавление