SvelteKit

Obrazki OG w
SvelteKit

Adres obrazka pobierz w load, wstaw w svelte:head.

Dokumentacja API Sprawdź, co masz teraz

Gdzie to wpiąć

Funkcja `load` w pliku `+page.server.ts` wykonuje się wyłącznie na serwerze, więc klucz nigdy nie trafia do przeglądarki. Wynik wchodzi do danych strony i renderuje się w `<svelte:head>`.

src/routes/blog/[slug]/+page.server.ts

import { IMAGE_API_KEY } from '$env/static/private';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await getPost(params.slug);

  const res = await fetch('https://imageapi.dev/v1/images?wait=true', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${IMAGE_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      template: 'blog-og',
      modifications: { title: post.title, author: post.author, site: 'yourblog.com' },
    }),
  });

  const { url: ogImage } = await res.json();

  return { post, ogImage };
};
Pułapka

Import z `$env/static/private` jest sprawdzany przy budowaniu — jeśli spróbujesz użyć go w `+page.ts` (uniwersalnym), SvelteKit przerwie build. To zamierzone i ratuje przed wyciekiem klucza.

Co dostajesz w odpowiedzi

Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.

{
    "id": "img_01m08s3ez1zcv28h335g9923bw",
    "status": "completed",
    "url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
    "duration_ms": 912
}

Ile to kosztuje

Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.

Inne frameworki

Next.js Nuxt Astro WordPress Laravel Hugo Ruby on Rails Django Jekyll Ghost Eleventy Docusaurus
Zacznij od dokumentacji