Menu

ImageResponse

Der ImageResponse-Konstruktor ermöglicht es Ihnen, dynamische Bilder mit JSX und CSS zu generieren. Dies ist nützlich zum Erstellen von Social-Media-Bildern wie Open Graph-Bildern, Twitter-Karten und mehr.

Für ImageResponse stehen folgende Optionen zur Verfügung:

import { ImageResponse } from 'next/og'
 
new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false
 
    // Optionen, die an die HTTP-Antwort übergeben werden
    status?: number = 200
    statusText?: string
    headers?: Record<string, string>
  },
)

Unterstützte CSS-Eigenschaften

Bitte konsultieren Sie die Dokumentation von Satori für eine Liste unterstützter HTML- und CSS-Funktionen.

Versionshistorie

VersionÄnderungen
v14.0.0ImageResponse von next/server nach next/og verschoben
v13.3.0ImageResponse kann aus next/server importiert werden.
v13.0.0ImageResponse über das @vercel/og-Paket eingeführt.