VueCraft NPM

Image Kit ​

1.4.1 ​

2026-10-03

  • Исправлено: в vite dev плагин мог бесконечно перегенерировать изображения. Горячее обновление запускало generate() для любого изменившегося файла-изображения, включая файлы, которые сам generate() писал в output, а при incremental: false каждый проход перезаписывал их и запускал следующий — сотни запусков в секунду. Теперь горячее обновление запускается только для изображения внутри input и никогда для изображения внутри output, а проходы не накладываются друг на друга: изменения, пришедшие во время работы, объединяются в один повторный запуск. См. Vite-плагин.
  • Исправлено: папка output внутри input пропускается при сканировании input и больше не подаётся обратно как исходные изображения.
  • Исправлено: dev-сервер больше не перезагружает страницу на каждый сгенерированный файл; манифест плейсхолдеров следит только за папками из placeholders.dirs.
  • Исправлено: огромный SVG (например, 30000×30000) ронял ?placeholder на лимите пикселей sharp. Теперь размер читается из собственных width/height/viewBox файла, а цвет считается по небольшому рендеру.
  • Исправлено: битый SVG ронял всю сборку на ?placeholder. Теперь плагин предупреждает и возвращает объявленный размер (или пустой объект); битое растровое изображение по-прежнему падает.
  • Изменено: ?blurhash и ?thumbhash для SVG печатают предупреждение, что у вектора есть только цвет, и указывают на ?placeholder, вместо молчаливого возврата пустой строки.

1.4.0 ​

2026-10-01

  • Плейсхолдеры для папок целиком. npx vue-image-kit placeholders --dir public/images считает каждое изображение папки, рекурсивно, и добавляет его в манифест под тем URL, по которому оно отдаётся. Поэтому изображение, чей src собирается во время выполнения (:src="category.image"), тоже получает плейсхолдер. --dir src/img=/assets/img задаёт папку, которая отдаётся с другого URL, а --url добавляет одно удалённое или CDN-изображение без --remote. Подробнее — в разделе Папки и URL.
  • Плагин Vite собирает такой же манифест сам. С vueImageKit({ generate: false, placeholders: { dirs: [...] } }) он доступен как виртуальный модуль virtual:vue-image-kit/placeholders, пересобирается при изменении файла в этих папках и кешируется между сборками. Подробнее — в разделе Манифест плейсхолдеров из папок.
  • Модуль Nuxt регистрирует всё сам. vueImageKit: { placeholders: { dirs: [...] } } добавляет плагин Vite и передаёт манифест каждому <VImage> — запускать команду и добавлять запись в vite.plugins не нужно. Прежняя строковая форма, путь к файлу манифеста, работает как раньше, а manifest объединяет такой файл с остальным. Подробнее — в разделе Опции модуля.
  • Новые импорты Vite, которые считают только плейсхолдер и не пишут файлы. import placeholder from './photo.jpg?placeholder' возвращает { blurhash, placeholderColor, width, height } — это пропсы самого <VImage>, поэтому достаточно <VImage v-bind="placeholder" />. ?placeholder=thumbhash возвращает ThumbHash вместо BlurHash, ?placeholder=color — только доминирующий цвет и размер, а новый импорт ?blurhash — только строку BlurHash, как ?thumbhash. Они работают и через import.meta.glob(..., { query: '?placeholder' }).
  • Новая опция generate: false у плагина Vite. С ней плагин больше не обрабатывает всю папку input при старте и при горячих обновлениях, а только отвечает на импорты ?vik, ?placeholder, ?blurhash, ?thumbhash и на виртуальный манифест. Папка input может не существовать. Подробнее — в разделе Только плейсхолдеры, без изменения размеров.
  • Хеши можно настраивать: --components 4x3 (компоненты BlurHash), --sample 100 (размер, до которого изображение уменьшается перед расчётом) и --color dominant|average у команды, а также tuning: { components, sample, color } в файле конфигурации, плагине Vite и модуле Nuxt. При смене настроек кеш сбрасывается. Подробнее — в разделе Настройка хешей.
  • Плагин Vite кеширует плейсхолдеры в том же файле, что и команда placeholders, поэтому повторная сборка читает только изменившиеся изображения.
  • v-lazy-img и useBackgroundImage() читают манифест плейсхолдеров. Если у них нет своего placeholder, пока изображение грузится, они показывают декодированное размытие и доминирующий цвет записи для своего src, а команда placeholders заполняет манифест для их статических использований. Подробнее — в разделе v-lazy-img и useBackgroundImage().
  • ?thumbhash и ?blurhash теперь считают значения так же, как команда placeholders — BlurHash поверх белого фона, ThumbHash с вписыванием в 100×100, — так что одно и то же изображение получает один и тот же хеш в обоих случаях.