Image

Картинки без сдвига вёрстки: заглушка, мягкое появление, запасной вариант, источник для тёмной темы. Бесплатно, MIT · Данные и показатели › Карточки

Установка

npx valyro-cli@latest add image

npx shadcn@latest add https://valyro.xyz/r/image.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Image } from 'valyro-ui';

Пропсы

Prop	Type	Default
`src` *	`string`		The picture. An empty string keeps the placeholder up (the address is still on its way).
`alt` *	`string`		Text alternative; `""` marks a decorative picture.
`srcDark`	`string`		Source for dark mode: follows the colour scheme of the nearest ThemeProvider / ThemeScope, cross-fading on a switch.
`srcSet`	`string`		Responsive candidates for `src` (not for `srcDark`).
`sizes`	`string`		Layout widths for `srcSet`.
`width`	`number`		Intrinsic width in px: with `height`, reserves the box before the picture arrives.
`height`	`number`		Intrinsic height in px.
`aspectRatio`	`number \| string`		Reserves the box before load so nothing below moves, e.g. `"16/9"` or `1.5`.
`fit`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	How the picture fills the reserved box (`object-fit`).
`placeholder`	`'shimmer' \| 'color' \| 'blur' \| 'none' \| ReactNode`	`'shimmer'`	What shows while loading: a moving sheen, a plain fill, a blurred preview (`blurDataURL`), nothing, or your node.
`blurDataURL`	`string`		A tiny data URL shown blurred while the picture loads (`placeholder="blur"`).
`fallback`	`ReactNode \| string`		Shown when the picture fails: a string is tried once as another source; a node is shown as is. Default: an image icon.
`priority`	`boolean`	`false`	Above the fold: loads eagerly at high priority and appears without a fade.
`loading`	`'lazy' \| 'eager'`		Native lazy loading (default `lazy`, `eager` with `priority`).
`crossOrigin`	`'anonymous' \| 'use-credentials' \| ''`		CORS mode of the request.
`referrerPolicy`	`ComponentPropsWithRef<'img'>['referrerPolicy']`		Referrer sent with the request.
`imgRef`	`Ref<HTMLImageElement>`		Ref to the `<img>` element on screen (`ref` is the wrapper's).
`onStatusChange`	`(status: ImageStatus) => void`		Called when the picture starts loading, appears or fails.
`labels`	`Partial<ImageLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Image

Установка

Пропсы

Похожие компоненты