CDN-адаптеры

vue-image-kit/cdn предоставляет билдеры URL для популярных CDN изображений — без зависимостей, чистые функции.

import {
  cloudinary,
  imgix,
  bunny,
  sanity,
  storyblok,
  contentful,
  vercel,
  cloudflare,
  imagekit,
  twicpics,
  netlify,
  gumlet,
} from 'vue-image-kit/cdn'

Все адаптеры используют один и тот же интерфейс:

adapter.url(path, options?)     // → строка с одним URL
adapter.srcset(path, widths, options?)  // → готовая строка srcset

Cloudinary:

const cdn = cloudinary({ cloudName: 'my-cloud' })

cdn.url('photo.jpg', { width: 800, format: 'webp' })
// → https://res.cloudinary.com/my-cloud/w_800,q_auto,f_webp/image/upload/photo.jpg

cdn.srcset('photo.jpg', [400, 800, 1200])
// → 'https://res.cloudinary.com/my-cloud/w_400,... 400w, ...'

imgix:

const cdn = imgix('https://mysite.imgix.net')

cdn.url('photo.jpg', { width: 800, dpr: 2 })
// → https://mysite.imgix.net/photo.jpg?w=800&dpr=2&auto=format

cdn.srcset('photo.jpg', [400, 800, 1200])

Bunny CDN:

const cdn = bunny('https://myzone.b-cdn.net')
cdn.url('photo.jpg', { width: 800, format: 'webp', quality: 85 })

Sanity:

const cdn = sanity({ projectId: 'abc123', dataset: 'production' })
cdn.url('image-abc123-800x600-jpg', { width: 400 })

Storyblok:

const cdn = storyblok()
cdn.url('https://a.storyblok.com/f/12345/photo.jpg', { width: 800 })

Contentful:

const cdn = contentful()
cdn.url('https://images.ctfassets.net/space/token/photo.jpg', { width: 800 })

Vercel Image Optimization:

const cdn = vercel({ origin: 'https://myapp.vercel.app' })
cdn.url('/photo.jpg', { width: 800, quality: 75 })
// → https://myapp.vercel.app/_vercel/image?url=%2Fphoto.jpg&w=800&q=75

Cloudflare Images:

const cdn = cloudflare('https://example.com')
cdn.url('/photo.jpg', { width: 800, format: 'webp' })
// → https://example.com/cdn-cgi/image/width=800,format=webp/photo.jpg

ImageKit.io:

const cdn = imagekit('https://ik.imagekit.io/your_id')
cdn.url('photo.jpg', { width: 800, format: 'webp' })
// → https://ik.imagekit.io/your_id/photo.jpg?tr=w-800,f-webp

TwicPics:

const cdn = twicpics('https://demo.twic.pics')
cdn.url('photo.jpg', { width: 800, format: 'webp' })
// → https://demo.twic.pics/photo.jpg?twic=v1/resize=800/output=webp

Netlify Image CDN:

const cdn = netlify({ origin: 'https://myapp.netlify.app' })
cdn.url('/photo.jpg', { width: 800, format: 'webp', quality: 75 })
// → https://myapp.netlify.app/.netlify/images?url=%2Fphoto.jpg&w=800&fm=webp&q=75

Gumlet:

const cdn = gumlet('https://demo.gumlet.io')
cdn.url('photo.jpg', { width: 800, format: 'webp' })
// → https://demo.gumlet.io/photo.jpg?w=800&format=webp

Использование с VImage:

<script setup lang="ts">
import { cloudinary } from 'vue-image-kit/cdn'
const cdn = cloudinary({ cloudName: 'my-cloud' })
</script>

<template>
  <VImage
    src="/photo.jpg"
    alt="Photo"
    :srcset="cdn.srcset('/photo.jpg', [400, 800, 1200])"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</template>

Автоопределение CDN

autoLoader() смотрит на хост URL и подбирает нужный адаптер за вас — никакой настройки под каждого провайдера, если ассет уже отдаётся с распознаваемого хоста CDN. Так распознаются 8 из 12 адаптеров: Cloudinary, imgix, Bunny, ImageKit, Sanity, Storyblok, Contentful, Gumlet. Возвращает URL без изменений, когда ничего не совпало, поэтому его безопасно запускать над каждым src безусловно — локальный /images/photo.jpg просто пройдёт насквозь.

import { autoLoader } from 'vue-image-kit/cdn'

autoLoader('https://res.cloudinary.com/demo/image/upload/photo.jpg', { width: 800 })
// → https://res.cloudinary.com/demo/w_800,q_auto,f_auto/image/upload/photo.jpg

autoLoader('/local/photo.jpg', { width: 800 })
// → '/local/photo.jpg' — нет распознанного хоста CDN, без изменений

Остальные 4 адаптера (Netlify, Vercel, Cloudflare, TwicPics) работают на вашем собственном домене, а не на характерном, поэтому определить хост невозможно — передавайте их явно через config.hosts, по ключу вашего реального домена:

import { autoLoader, netlify } from 'vue-image-kit/cdn'

autoLoader(
  src,
  { width: 800 },
  {
    hosts: { 'myapp.netlify.app': netlify({ origin: 'https://myapp.netlify.app' }) },
  },
)

autoSrcset() — то же определение, строящее реальный srcset по ширинам (отдельный URL на каждую ширину, через собственный .srcset() адаптера) вместо единственного URL — в отличие от autoLoader, возвращает undefined, а не неизменённый вход, когда ничего не определено, поскольку нет разумного «неизменённого srcset», к которому можно откатиться:

import { autoSrcset } from 'vue-image-kit/cdn'

autoSrcset('https://mysite.imgix.net/photo.jpg', [400, 800, 1200])
// → 'https://mysite.imgix.net/photo.jpg?w=400&auto=format 400w, ...'

Автоопределение CDN с VImage

Проп cdn у VImage подключает autoLoader()/autoSrcset() прямо в компонент — без ручного определения, без ручного переписывания src:

<VImage src="https://res.cloudinary.com/demo/image/upload/photo.jpg" alt="Photo" cdn />

В сочетании с widths каждый кандидат получает реальный URL, преобразованный CDN, через .srcset() адаптера — вместо обычного для widths поведения «один и тот же URL, разный дескриптор w» (generateSrcset — см. Адаптация к сети, почему это ограничение существует для не-CDN случая):

<VImage src="https://mysite.imgix.net/photo.jpg" alt="Photo" cdn :widths="[400, 800, 1200]" />

Передайте объект AutoLoaderConfig вместо true, чтобы покрыть провайдеров «на вашем собственном домене» (Netlify/Vercel/Cloudflare/TwicPics) через hosts, так же как у самого autoLoader():

<script setup lang="ts">
import { netlify } from 'vue-image-kit/cdn'
const cdnConfig = {
  hosts: { 'myapp.netlify.app': netlify({ origin: 'https://myapp.netlify.app' }) },
}
</script>

<template>
  <VImage src="https://myapp.netlify.app/photo.jpg" alt="Photo" :cdn="cdnConfig" />
</template>

Не действует на нераспознанном хосте (проходит насквозь, как и autoLoader), или на явном объекте SrcSet / densities — это уже выбор формата/разрешения, сделанный вами вручную.