@yandex/ui/esm/Image/Image.d.ts

Yandex UI components

import React, { RefObject, ReactNode, MouseEventHandler } from 'react';
import './Image.css';
export interface IImageProps {
    /**
     * Ссылка на корневой DOM-элемент компонента
     */
    innerRef?: RefObject<HTMLImageElement>;
    /**
     * Ссылка на изображение
     */
    src?: string;
    /**
     * Набор источников для создания [адаптивных изображений](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Подробнее об атрибуте `srcSet` в документации [MDN web docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/img#attr-srcset)
     */
    srcSet?: string;
    /**
     * Набор размеров для создания [адаптивных изображений](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Подробнее об атрибуте `sizes` в документации [MDN web docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/img#attr-sizes)
     */
    sizes?: string;
    /**
     * URL картинки для экранов с высокой плотностью пикселей = srcSet: "url 2x". srcSet имеет приоритет.
     */
    src2x?: string;
    /**
     * Ссылка на изображение при неудачной загрузке
     */
    fallbackSrc?: string;
    /**
     * Дополнительный класс
     */
    className?: string;
    /**
     * Дополнительный класс для изображения
     */
    imageClassName?: string;
    /**
     * Компонент для отображения во время загрузки картинки
     */
    stub?: ReactNode;
    /**
     * Альтернативный текст
     */
    alt?: string;
    /**
     * атрибут aria-label
     */
    ariaLabel?: string;
    /**
     * обработчик клика
     */
    onClick?: MouseEventHandler<HTMLElement>;
    /**
     * атрибут [loading у изображения](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
     */
    loading?: 'lazy' | 'eager' | 'auto';
    /**
     * Ширина изображения
     */
    width?: number | string;
    /**
     * Высота изображения
     */
    height?: number | string;
    /**
     * Скругления изображения
     */
    borderRadius?: number | string;
}
/**
 * Компонент для красивой загрузки картинок

 * - Пока загружается картинка, пользователь будет видеть `<stub/>`
 * - После загрузки картинки она будет плавно отображена поверх `<stub/>`
 * - После плавного показана картинки `<stub/>` будет удалён из `DOM`
 * - Если картинка загружается из кэша, то пользователь увидит сразу картинку без показа `<stub/>`
 * - Если картинку не удалось загрузить, то покажется стандартная картинка из свойства `fallback`
 * @param {IImageProps} props
 */
export declare const Image: React.FC<IImageProps>;