generateImageMetadata
Unanswered
Skipjack tuna posted this in #help-forum
Skipjack tunaOP
I'm trying to generate image for metadata with background image but when I import like below, it doesnt give any og image but just white blank page. Am I doing something wrong?
import { ImageResponse } from "next/server";
export function generateImageMetadata() {
return [
{
contentType: "image/png",
size: { width: 960, height: 480 },
id: "small",
},
{
contentType: "image/png",
size: { width: 960, height: 480 },
id: "medium",
},
];
}
async function getData(id: string) {
const res = await fetch(`http://fetching-url.../${id}`);
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error("Failed to fetch data");
}
return res.json();
}
export default async function Image({ params, id }: { params: { id: string }; id: number }) {
const productId = params.id;
const imageId = id;
const { data } = await getData(params.id);
return new ImageResponse(
(
<div
style={{
backgroundImage: "url(https://image-url.../background.webp)",
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
width: "100%",
height: "100%",
backgroundColor: "#000000",
}}
>
{data.title}
</div>
)
);
}