跳到內容
API 參考函式ImageResponse

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.0ImageResponse 可以從 next/server 匯入。
v13.0.0透過 @vercel/og 套件引入 ImageResponse。