generateImageMetadata
你可以使用 generateImageMetadata 来为一个图像生成不同版本或为一个路由段返回多个图像。这在你想避免硬编码元数据值时很有用，比如对于图标。
参数
generateImageMetadata 函数接受以下参数：
params (可选)
一个包含 动态路由参数 对象的对象，从根段到调用 generateImageMetadata 的段。
icon.tsx
export function generateImageMetadata({
params,
}: {
params: { slug: string };
}) {
// ...
}icon.js
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 函数应返回一个包含图像元数据的对象数组，如 alt 和 size。此外，每个项目必须包含一个 id 值，该值将传递给图像生成函数的 props。
| 图像元数据对象 | 类型 |
|---|---|
id | string (必需) |
alt | string |
size | { width: number; height: number } |
contentType | string |
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>
)
);
}icon.js
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>
)
);
}示例
使用外部数据
这个示例使用 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 = params.id;
const imageId = id;
const text = await getCaptionForImage(productId, imageId);
return new ImageResponse(
(
<div
style={
{
// ...
}
}
>
{text}
</div>
)
);
}app/products/[id]/opengraph-image.js
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>
)
);
}版本历史
| 版本 | 变更 |
|---|---|
v13.3.0 | 引入了 generateImageMetadata。 |