VueCraft NPM

Image Kit ​

1.6.2 ​

2026-10-05

  • Исправлено: с sources или объектом в src <VImage> рендерит <picture>, и class, style и другие атрибуты, переданные компоненту, попадали на <picture>, а не на <img>, который показывает картинку, — поэтому border-radius, object-fit и похожие правила из собственного класса пользователя не давали видимого эффекта, хотя тот же класс на обычном <img> работал. Теперь атрибуты всегда попадают на элемент, который показывает картинку: плейсхолдер, блок ошибки или <img>, в том числе внутри <picture>. Сам <picture> рендерится с display: contents, поэтому в раскладке не участвует, и <img> раскладывается так, будто стоит сам по себе. Обработчики событий, переданные в <VImage> (@click и др.), тоже привязываются к <img> и работают рядом с собственной обработкой load/error компонента. Если стиль или тест обращался к <picture> через класс или атрибут data-*, заданный на <VImage>, обращайтесь к <img> или к родительскому элементу. См. Компоновка без обёртки.

1.6.1 ​

2026-10-05

  • Исправлено: начиная с 1.6.0 <VImage> на сервере рендерил фрагмент, из-за чего class, style и другие атрибуты, переданные ему, не попадали на <img>, а Vue печатал предупреждение Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. Теперь фрагмент рендерится только там, где он нужен, — для ленивой картинки с ssrPlaceholder и готовым превью, — и в этом случае атрибуты передаются на <img> явно. Во всех остальных состояниях на сервере и на клиенте снова один элемент.
  • Исправлено: class теперь добавляется и на изображение внутри <noscript> у отложенной картинки, чтобы без JavaScript она выглядела так же.

1.6.0 ​

2026-10-03

  • Автоматические плейсхолдеры для импортируемых изображений. placeholders: { imports: true } (в Nuxt: vueImageKit: { placeholders: { imports: true } }) считает плейсхолдер при сборке для каждого изображения, которое скрипт или однофайловый компонент импортирует default-импортом, — включая импорты, которые Vue генерирует из src="…" в шаблоне, и те, в которые разворачивается import.meta.glob(…, { eager: true }). Без запроса ?placeholder и без правок шаблонов: плейсхолдер регистрируется под самим импортированным значением (dev-URL или хешированный URL сборки), поэтому <VImage :src="hero" /> сам находит своё размытие и размер — в dev, в сборке и при серверном рендеринге. Настраивается через mode, extensions и exclude. См. Плейсхолдер для каждого импортируемого изображения.
  • Новый экспорт registerPlaceholder(src, data). VImage, v-lazy-img и useBackgroundImage() ищут src в этом реестре после манифеста placeholders, так что манифест передавать не обязательно.
  • Битое растровое изображение больше не роняет сборку, когда плейсхолдер считается через переписанные импорты: печатается предупреждение, и плейсхолдера у него нет.
  • Новый проп <VImage> — ssrPlaceholder (включается явно, по умолчанию false). Отрендеренный на сервере <img> получает готовое превью (data: URL из placeholder, image.placeholder или реестра) как CSS-фон, поэтому у картинки есть blur ещё до запуска JavaScript; без пропса ничего не меняется. Ленивая картинка при этом ещё и удерживается: сервер отдаёт прозрачный пиксель вместо настоящего src, а настоящий <img> кладёт в <noscript>, поэтому тяжёлый файл скачивается только когда картинка приближается к области просмотра, а поисковики и посетители без JavaScript всё равно его получают (нетерпеливая картинка — lazy="false" или priority — сохраняет src). После гидрации превью продолжает показываться под картинкой, а сервер и клиент рендерят одинаковый результат, поэтому hydration mismatch нет. См. Превью в серверном HTML.
  • Новая опция placeholders.imports.preview (true или список шаблонов путей: директория, точный файл, часть пути или glob вроде src/**/hero-*.webp; сравниваются с настоящим путём файла от корня проекта, поэтому импорты через алиасы работают). exclude принимает те же шаблоны. См. Выбор изображений по пути. Плагин дополнительно рисует готовое превью для импортируемых изображений и регистрирует его, поэтому в шаблоне достаточно <VImage :src="hero" ssr-placeholder />. По умолчанию выключена; на этапе сборки нужен пакет thumbhash. См. Готовое превью для серверного рендеринга.
  • Записи реестра и registerPlaceholder() принимают готовое превью (placeholder или preview). Реестр живёт в globalThis, поэтому серверная и клиентская копии пакета используют один и тот же.