Image

Компонент Image в Chakra UI предназначен для отображения изображений с полной поддержкой адаптивного дизайна, стилизации и интеграции с системой тем. Он расширяет стандартный HTML-тег <img>, добавляя мощные возможности для управления размером, формой, эффектами и поведением при загрузке.

Базовое использование

import { Image } from "@chakra-ui/react";

<Image 
  src="https://example.com/photo.jpg" 
  alt="Описание изображения"
/>
  • src – URL изображения или локальный путь.
  • alt – текстовое описание, обязательное для доступности (accessibility).

Если alt не указан, компонент выдаст предупреждение при разработке в режиме strict.

Размеры и адаптивность

Chakra UI позволяет управлять размерами через props boxSize, width, height, maxW, maxH, minW, minH.

<Image 
  src="https://example.com/photo.jpg"
  alt="Пример"
  boxSize="200px"
  objectFit="cover"
/>
  • boxSize – устанавливает одновременно ширину и высоту.
  • objectFit – определяет, как изображение масштабируется внутри контейнера: cover, contain, fill, none, scale-down.
  • maxW и maxH – ограничивают максимальные размеры, полезно для адаптивных макетов.

Примеры адаптивных размеров:

<Image 
  src="https://example.com/photo.jpg"
  alt="Адаптивное изображение"
  width={["100%", "50%", "25%"]} // mobile, tablet, desktop
  borderRadius="md"
/>

Здесь размеры автоматически меняются в зависимости от breakpoint.

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

Компонент Image поддерживает fallbackSrc – изображение, отображаемое, если основной источник не загружается.

<Image
  src="https://example.com/nonexistent.jpg"
  alt="Fallback Example"
  fallbackSrc="https://example.com/fallback.jpg"
/>

Можно также использовать fallback как JSX для кастомного содержимого:

<Image
  src="https://example.com/nonexistent.jpg"
  alt="Custom Fallback"
  fallback={<div style={{width: 200, height: 200, background: "#eee"}}>Загрузка...</div>}
/>

Стилизация и эффекты

Chakra UI позволяет применять border, shadow, rounded и transition напрямую через props:

<Image
  src="https://example.com/photo.jpg"
  alt="Styled Image"
  borderRadius="full"
  border="2px solid teal"
  boxShadow="lg"
  transition="transform 0.3s"
  _hover={{ transform: "scale(1.05)" }}
/>
  • **_hover** – псевдокласс для hover-состояния.
  • borderRadius=“full” – делает изображение круглым.
  • boxShadow – тени, которые интегрируются с темой.

Lazy Loading и оптимизация

Для больших страниц или галерей изображений важна оптимизация через loading=“lazy”:

<Image
  src="https://example.com/photo.jpg"
  alt="Lazy Loaded"
  loading="lazy"
/>

Это позволяет браузеру загружать изображения только когда они попадают в видимую область экрана.

Работа с объектами и позиционированием

  • objectFit – как изображение масштабируется.
  • objectPosition – точка привязки изображения:
<Image
  src="https://example.com/photo.jpg"
  alt="Object Position Example"
  boxSize="300px"
  objectFit="cover"
  objectPosition="top"
/>
  • cover – изображение заполняет контейнер, сохраняя пропорции.
  • contain – изображение полностью помещается в контейнер.
  • fill – растягивает изображение, игнорируя пропорции.

Интеграция с Box и другие контейнеры

Изображение может быть обёрнуто в Box для добавления границ, отступов и позиционирования:

import { Box, Image } from "@chakra-ui/react";

<Box boxSize="250px" overflow="hidden" borderRadius="lg">
  <Image
    src="https://example.com/photo.jpg"
    alt="Box Wrapped"
    objectFit="cover"
    width="100%"
    height="100%"
  />
</Box>
  • overflow=“hidden” предотвращает выход изображения за рамки контейнера.
  • borderRadius применяется к Box, создавая аккуратные обрезанные углы.

Комбинация с Skeleton

Для улучшения UX при загрузке изображений используется Skeleton:

import { Image, Skeleton, Box } from "@chakra-ui/react";
import { useState } from "react";

function ImageWithSkeleton() {
  const [loaded, setLoaded] = useState(false);

  return (
    <Box>
      {!loaded && <Skeleton height="200px" width="300px" />}
      <Image
        src="https://example.com/photo.jpg"
        alt="Skeleton Example"
        display={loaded ? "block" : "none"}
        onL oad={() => setLoaded(true)}
      />
    </Box>
  );
}
  • Skeleton отображается до полной загрузки изображения.
  • onLoad меняет состояние, скрывая скелетон после загрузки.

Адаптация под тему

Chakra UI поддерживает динамическую стилизацию в зависимости от темы:

<Image
  src="https://example.com/photo.jpg"
  alt="Themed Image"
  borderColor="gray.200"
  _dark={{ borderColor: "gray.600" }}
  borderWidth="2px"
  borderStyle="solid"
/>
  • **_dark** – стили для тёмной темы.
  • Компоненты Chakra автоматически наследуют тему из провайдера ChakraProvider.

Примеры практических комбинаций

Галерея с адаптивными изображениями:

import { SimpleGrid, Image } from "@chakra-ui/react";

<SimpleGrid columns={[1, 2, 4]} spacing={4}>
  {images.map((img) => (
    <Image
      key={img.id}
      src={img.url}
      alt={img.alt}
      borderRadius="md"
      objectFit="cover"
      boxSize="250px"
    />
  ))}
</SimpleGrid>

Карточка пользователя с аватаром:

import { Box, Image, Text } from "@chakra-ui/react";

<Box p={4} borderWidth="1px" borderRadius="md">
  <Image
    src="https://example.com/avatar.jpg"
    alt="User Avatar"
    borderRadius="full"
    boxSize="100px"
    mb={4}
  />
  <Text fontWeight="bold">Имя пользователя</Text>
  <Text fontSize="sm" color="gray.500">Позиция или роль</Text>
</Box>

Компонент Image в Chakra UI предоставляет гибкую систему управления изображениями, позволяя строить адаптивные и стилизованные интерфейсы без необходимости писать CSS вручную. Его интеграция с Box, Skeleton, адаптивными props и темами делает его центральным элементом для создания визуально богатых веб-приложений.

Оглавление