НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Изображение

Image показывает картинку с заглушкой на время загрузки, запасным видом при ошибке и ленивой загрузкой, а alt остаётся верным в любом состоянии.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-aspect-ratio ratio="4/3">
  <tk-image src="/photos/market.jpg" alt="A market stall of fresh fruit"></tk-image>
</tk-aspect-ratio>

Анатомия

Часть Что это
tk-image рамка; изображение её заполняет
изображение нативный <img>, вписанный в рамку по fit
заглушка видна, пока изображение грузится; по умолчанию Skeleton
запасной вид виден, если загрузка не удалась или src пуст; утопленный блок со значком изображения

Состояния

<tk-aspect-ratio ratio="4/3" style="max-width: 240px">
  <tk-image alt="Product photo"></tk-image>
</tk-aspect-ratio>
Состояние Когда Что видно
loading src задан, но ещё не загружен заглушка
loaded изображение загрузилось изображение
error загрузка не удалась или src пуст запасной вид
  • Изображение из кэша никогда не застревает в загрузке.
  • Пустой src сразу показывает запасной вид.
  • Смена src запускает загрузку заново, в том числе после ошибки.

Место под изображение

Изображение без заранее заданной высоты сдвигает страницу, когда загружается. Резервируйте место для любого изображения на первом экране или в списке:

<tk-aspect-ratio ratio="16/9">
  <tk-image src="/photos/hero.jpg" alt="The team at the spring offsite" loading="eager"></tk-image>
</tk-aspect-ratio>
<tk-image src="/photos/chart.png" alt="Sales by month, rising since March" width="800" height="450"></tk-image>
  • Оберните его в Aspect ratio или
  • задайте width и height равными размеру исходника в пикселях. Они резервируют место до загрузки. Это размер исходника, а не пропорция.

Без того и другого изображение после загрузки примет свои пропорции, и страница сдвинется.

Вписывание

  • cover (по умолчанию): заполняет рамку и обрезает лишнее. Подходит внутри Aspect ratio.
  • contain: показывает изображение целиком, оставляя пустые поля.

--tk-image-position задаёт точку фокуса (по умолчанию center). --tk-image-radius скругляет углы (по умолчанию углы прямые).

<tk-aspect-ratio ratio="1/1" style="max-width: 160px">
  <tk-image alt="Store logo" fit="contain" style="--tk-image-radius: var(--radius-12)"></tk-image>
</tk-aspect-ratio>

Ленивая загрузка

loading="lazy" (по умолчанию) загружает изображение, когда оно приближается к области просмотра. Для главного изображения в начале страницы ставьте eager.

Ленивая загрузка работает, только если место зарезервировано. Изображения без высоты сжимаются к началу страницы, и браузер загружает их все сразу.