generateImageMetadata

您可以使用 generateImageMetadata 為單一圖片產生不同版本，或針對單一路由區段回傳多張圖片。這在您想要避免硬編碼中繼資料值時非常有用，例如圖示。

參數

generateImageMetadata 函式接受下列參數

`params` (選填)

一個物件，包含從根區段到呼叫 generateImageMetadata 的區段的動態路由參數物件。

icon.tsx

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

路由	網址	`參數 (params)`
`app/shop/icon.js`	`/shop`	`未定義`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

回傳

generateImageMetadata 函式應該回傳一個包含圖片中數據的物件陣列，例如 alt 和 size。此外，每個項目**必須**包含一個 id 值，該值將會傳遞給圖片產生函式的屬性。

圖片中繼資料物件	類型
`id`	`string`（必填）
`alt`	`字串`
`size`	`{ width: 數字; height: 數字 }`
`contentType`	`字串`

icon.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 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>
    )
  )
}

範例

使用外部資料

此範例使用 params 物件和外部資料，為路由區段產生多個 Open Graph 圖片。

app/products/[id]/opengraph-image.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: { id: string }
  id: number
}) {
  const productId = (await params).id
  const imageId = id
  const text = await getCaptionForImage(productId, imageId)
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}