生成图像元数据

您可以使用 generateImageMetadata 为一个路由片段生成一个图像的不同版本，或者返回多个图像。当您想要避免硬编码元数据值（例如用于图标）时，这会非常有用。

参数

generateImageMetadata 函数接受以下参数：

`params` (可选)

一个对象，包含从根片段到调用 generateImageMetadata 的片段的动态路由参数对象。

tsx

export function generateImageMetadata({
  params,
}: {
  params: { slug: string }
}) {
  // ...
}

jsx

export function generateImageMetadata({ params }) {
  // ...
}

路由	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

返回值

generateImageMetadata 函数应返回一个对象 array，其中包含图像的元数据，例如 alt 和 size。此外，每个项必须包含一个 id 值，该值将作为 promise 传递给图像生成函数的 props。

图像元数据对象	类型
`id`	`string` （必填）
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string`

tsx

import { ImageResponse } from 'next/og'

export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}

export default async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {iconId}
      </div>
    )
  )
}

jsx

import { ImageResponse } from 'next/og'

export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}

export default async function Icon({ id }) {
  const iconId = await id
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {iconId}
      </div>
    )
  )
}

图像生成函数 props

当使用 generateImageMetadata 时，默认导出的图像生成函数会接收以下 props：

`id`

一个 promise，它解析为 generateImageMetadata 返回的项之一的 id 值。id 将是 string 或 number，具体取决于 generateImageMetadata 返回的内容。

tsx

export default async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  // Use iconId to generate the image
}

jsx

export default async function Icon({ id }) {
  const iconId = await id
  // Use iconId to generate the image
}

`params` (可选)

一个 promise，它解析为一个对象，其中包含从根片段到图像所在片段的动态路由参数。

tsx

export default async function Icon({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // Use slug to generate the image
}

jsx

export default async function Icon({ params }) {
  const { slug } = await params
  // Use slug to generate the image
}

示例

使用外部数据

此示例使用 params 对象和外部数据为路由片段生成多个 Open Graph 图像。

tsx

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'

export async function generateImageMetadata({
  params,
}: {
  params: { id: string }
}) {
  const images = await getOGImages(params.id)

  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}

export default async function Image({
  params,
  id,
}: {
  params: Promise<{ id: string }>
  id: Promise<number>
}) {
  const productId = (await params).id
  const imageId = await id
  const text = await getCaptionForImage(productId, imageId)

  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}

jsx

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'

export async function generateImageMetadata({ params }) {
  const images = await getOGImages(params.id)

  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}

export default async function Image({ params, id }) {
  const productId = (await params).id
  const imageId = await id
  const text = await getCaptionForImage(productId, imageId)

  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}

版本历史

版本	变更
`v16.0.0`	传递给图像生成函数的 `id` 现在是一个解析为 `string` 或 `number` 的 promise
`v16.0.0`	传递给图像生成函数的 `params` 现在是一个解析为对象的 promise
`v13.3.0`	引入了 `generateImageMetadata`

参数

generateImageMetadata 函数接受以下参数：

`params` (可选)

一个对象，包含从根片段到调用 generateImageMetadata 的片段的动态路由参数对象。

tsx

export function generateImageMetadata({
  params,
}: {
  params: { slug: string }
}) {
  // ...
}

jsx

export function generateImageMetadata({ params }) {
  // ...
}

路由	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

返回值

图像元数据对象	类型
`id`	`string` （必填）
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string`

tsx

import { ImageResponse } from 'next/og'

export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}

export default async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {iconId}
      </div>
    )
  )
}

jsx

import { ImageResponse } from 'next/og'

export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ]
}

export default async function Icon({ id }) {
  const iconId = await id
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {iconId}
      </div>
    )
  )
}

图像生成函数 props

当使用 generateImageMetadata 时，默认导出的图像生成函数会接收以下 props：

`id`

一个 promise，它解析为 generateImageMetadata 返回的项之一的 id 值。id 将是 string 或 number，具体取决于 generateImageMetadata 返回的内容。

tsx

export default async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  // Use iconId to generate the image
}

jsx

export default async function Icon({ id }) {
  const iconId = await id
  // Use iconId to generate the image
}

`params` (可选)

一个 promise，它解析为一个对象，其中包含从根片段到图像所在片段的动态路由参数。

tsx

export default async function Icon({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // Use slug to generate the image
}

jsx

export default async function Icon({ params }) {
  const { slug } = await params
  // Use slug to generate the image
}

示例

使用外部数据

此示例使用 params 对象和外部数据为路由片段生成多个 Open Graph 图像。

tsx

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'

export async function generateImageMetadata({
  params,
}: {
  params: { id: string }
}) {
  const images = await getOGImages(params.id)

  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}

export default async function Image({
  params,
  id,
}: {
  params: Promise<{ id: string }>
  id: Promise<number>
}) {
  const productId = (await params).id
  const imageId = await id
  const text = await getCaptionForImage(productId, imageId)

  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}

jsx

import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'

export async function generateImageMetadata({ params }) {
  const images = await getOGImages(params.id)

  return images.map((image, idx) => ({
    id: idx,
    size: { width: 1200, height: 600 },
    alt: image.text,
    contentType: 'image/png',
  }))
}

export default async function Image({ params, id }) {
  const productId = (await params).id
  const imageId = await id
  const text = await getCaptionForImage(productId, imageId)

  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}

版本历史

版本	变更
`v16.0.0`	传递给图像生成函数的 `id` 现在是一个解析为 `string` 或 `number` 的 promise
`v16.0.0`	传递给图像生成函数的 `params` 现在是一个解析为对象的 promise
`v13.3.0`	引入了 `generateImageMetadata`

文档导航

参数

params (可选)

返回值

图像生成函数 props

id

params (可选)

示例

使用外部数据

版本历史

参数

params (可选)

返回值

图像生成函数 props

id

params (可选)

示例

使用外部数据

版本历史

`params` (可选)

`id`

`params` (可选)

`params` (可选)

`id`

`params` (可选)