ImageResponse

ImageResponse 构造函数允许你使用 JSX 和 CSS 生成动态图片。这对于生成社交媒体图片（例如 Open Graph 图片、Twitter 卡等）非常有用。

¥The ImageResponse constructor allows you to generate dynamic images using JSX and CSS. This is useful for generating social media images such as Open Graph images, Twitter cards, and more.

以下选项可用于 ImageResponse：

¥The following options are available for 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 属性

¥Supported CSS Properties

请参阅 Satori 的文档 了解受支持的 HTML 和 CSS 功能的列表。

¥Please refer to Satori’s documentation for a list of supported HTML and CSS features.

版本历史

¥Version History

版本	更改
v14.0.0	ImageResponse 从 next/server 移至 next/og
v13.3.0	可以从 next/server 导入 ImageResponse。
v13.0.0	ImageResponse 通过 @vercel/og 包引入。