跳至內容

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.0ImageResponse 已從 next/server 移至 next/og
v13.3.0可以從 next/server 導入 ImageResponse
v13.0.0透過 @vercel/og 套件引進 ImageResponse