图像响应

编程语言

520

图像响应

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

请参考 Satori 的文档获取支持的 HTML 和 CSS 特性的列表。

版本历史

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

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2222994

累计阅读

图像响应 3个月前

支持的 CSS 属性

版本历史

热门教程文档