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

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

<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.

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

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