ImageResponse
ImageResponse 建構子允許您使用 JSX 和 CSS 生成動態圖片。這對於生成社群媒體圖片非常有用，例如 Open Graph 圖片、Twitter 卡片等。
以下是 ImageResponse 可用的選項：
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
// 將傳遞給 HTTP 回應的選項
status?: number = 200
statusText?: string
headers?: Record<string, string>
},
)支援的 CSS 屬性
請參考 Satori 文件 查看支援的 HTML 和 CSS 功能清單。
版本歷史
| 版本 | 變更內容 |
|---|---|
v14.0.0 | ImageResponse 從 next/server 移至 next/og |
v13.3.0 | ImageResponse 可從 next/server 導入。 |
v13.0.0 | 透過 @vercel/og 套件引入 ImageResponse。 |