ImageResponse
Der ImageResponse-Konstruktor ermöglicht die Generierung dynamischer Bilder mit JSX und CSS. Dies ist nützlich für die Erstellung von Social-Media-Bildern wie Open-Graph-Bildern, Twitter-Karten und mehr.
Folgende Optionen stehen für ImageResponse 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
Eine Liste der unterstützten HTML- und CSS-Funktionen finden Sie in der Dokumentation von Satori.
Versionsverlauf
| Version | Änderungen |
|---|---|
v14.0.0 | ImageResponse wurde von next/server nach next/og verschoben |
v13.3.0 | ImageResponse kann aus next/server importiert werden. |
v13.0.0 | ImageResponse wurde über das @vercel/og-Paket eingeführt. |