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 属性

有关支持的 HTML 和 CSS 功能列表，请参阅 Satori 文档。

版本历史

版本	变更内容
`v14.0.0`	`ImageResponse` 从 `next/server` 移至 `next/og`
`v13.3.0`	可从 `next/server` 导入 `ImageResponse`
`v13.0.0`	通过 `@vercel/og` 包引入 `ImageResponse`

支持的 CSS 属性

版本历史

On this page