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
// Options that will be passed to the HTTP response
status?: number = 200
statusText?: string
headers?: Record<string, string>
},
)
支援的 CSS 屬性
請參閱Satori 的說明文件以取得支援的 HTML 和 CSS 功能列表。
版本歷史記錄
版本 | 變更 |
---|---|
v14.0.0 | ImageResponse 已從 next/server 移至 next/og |
v13.3.0 | 可以從 next/server 導入 ImageResponse 。 |
v13.0.0 | 透過 @vercel/og 套件引進 ImageResponse 。 |
這有幫助嗎?