VueCraft NPM

Адаптивные ленивые фоны ​

Директива v-lazy-img лениво загружает фон, но не умеет srcset. useBackgroundImage() — composable-аналог: ленивая загрузка + адаптивный image-set() (CSS-нативный эквивалент srcset) + blur-up — возвращается как реактивный :style, который вы биндите сами.

vue
<script setup lang="ts">
import { useBackgroundImage } from '@macrulez/vue-image-kit'

const { target, style, isLoaded } = useBackgroundImage('/hero.jpg', {
  placeholder: 'data:image/jpeg;base64,/9j/...',
  densities: [1, 2], // → image-set(url("/hero.jpg") 1x, url("/hero.jpg") 2x)
  rootMargin: '300px',
})
</script>

<template>
  <section ref="target" :style="style" class="hero">
    <h1 v-show="isLoaded">Welcome</h1>
  </section>
</template>

<style scoped>
.hero {
  width: 100%;
  height: 60vh;
}
</style>

Опции ​

placeholder ​

string, опционален. URL/data URL, показываемый (размытым) до загрузки полного изображения.

densities ​

number[], опционален. Строит адаптивный image-set() с записями 1x/2x/….

type ​

string, опционален. MIME-подсказка для записей image-set() (например, 'image/webp').

lazy ​

boolean · по умолчанию: true. Отложить загрузку за IntersectionObserver.

rootMargin ​

string · по умолчанию: '200px'. Корневой отступ IO.

threshold ​

number · по умолчанию: 0. Порог IO.

transition ​

string · по умолчанию: '0.4s ease'. Переход blur-up.

backgroundSize ​

string · по умолчанию: 'cover'. background-size.

backgroundPosition ​

string · по умолчанию: 'center'. background-position.

Плейсхолдеры из манифеста ​

Если placeholder не задан, src ищется в манифесте плейсхолдеров, зарегистрированном в приложении. При совпадении доминирующий цвет записи сразу попадает в style — в том числе на сервере, — а декодированное размытие добавляется после монтирования компонента. Оба исчезают, когда изображение загрузилось. Явный placeholder всегда главнее.

Возвращаемое значение ​

{ target, style, status, isLoaded, isLoading, load }. Прикрепите target через template-ref и забиндите style; вызовите load() для ручного запуска при lazy: false. SSR-безопасно (загрузка откладывается до клиента).