Skip to main content

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.0ImageResponse 从 next/server 移至 next/og
v13.3.0可以从 next/server 导入 ImageResponse。
v13.0.0ImageResponse 通过 @vercel/og 包引入。