ImageResponse

ImageResponse 建構子允許你使用 JSX 和 CSS 生成動態圖片。這對於生成社群媒體圖片非常有用，例如 Open Graph 圖片、Twitter 卡片等。

以下是 ImageResponse 可用的選項：

import { ImageResponse } from 'next/server'

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 功能清單。

版本歷史

版本	變更內容
`v13.3.0`	`ImageResponse` 可從 `next/server` 導入。
`v13.0.0`	`ImageResponse` 透過 `@vercel/og` 套件首次引入。

支援的 CSS 屬性

版本歷史

On this page