generateImageMetadata

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

¥You can use generateImageMetadata to generate different versions of one image or return multiple images for one route segment. This is useful for when you want to avoid hard-coding metadata values, such as for icons.

参数

¥Parameters

generateImageMetadata 函数接受以下参数：

¥generateImageMetadata function accepts the following parameters:

params（可选）

¥params (optional)

包含从根段到段 generateImageMetadata 的 动态路由参数 对象的对象被调用。

¥An object containing the dynamic route parameters object from the root segment down to the segment generateImageMetadata is called from.

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

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' }
app/shop/[...slug]/icon.js	/shop/1/2	{ slug: ['1', '2'] }

返回

¥Returns

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

¥The generateImageMetadata function should return an array of objects containing the image's metadata such as alt and size. In addition, each item must include an id value which will be passed to the props of the image generating function.

图片元数据对象	类型
id	string（必需的）
alt	string
size	{ width: number; height: number }
contentType	string

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 function Icon({ id }: { id: string }) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {id}
      </div>
    )
  )
}

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 function Icon({ id }) {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {id}
      </div>
    )
  )
}

示例

¥Examples

使用外部数据

¥Using external data

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

¥This example uses the params object and external data to generate multiple Open Graph images for a route segment.

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: { id: string }
  id: number
}) {
  const productId = params.id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)

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

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 = params.id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)

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

版本历史

¥Version History

版本	变化
v13.3.0	generateImageMetadata 推出。