ImageResponse with geistMono
Unanswered
Turkish Van posted this in #help-forum
Turkish VanOP
import PostsService from "@/infra/services/posts";
import { ImageResponse } from "next/og";
import { promises } from "fs";
import { join } from "path";
export const alt = "Miguer";
export const size = {
width: 1200,
height: 630,
};
export const contentType = "image/png";
export default async function Image({ params }: { params: { id: number } }) {
const post = await new PostsService().get(params.id);
const fontData = await promises.readFile(
join(process.cwd(), "public/GeistMono-Regular.otf"),
);
const font = Uint8Array.from(fontData).buffer;
return new ImageResponse(
<div
style={{
fontSize: 48,
background: "white",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundSize: "cover",
fontStyle: "italic",
}}
>
...
</div>,
{
...size,
fonts: [
{
data: font,
name: "GeistMono",
},
],
},
);
}
1 Reply
Turkish VanOP
and I receive this error: ⨯ [Error: failed to pipe response] {
[cause]: Error: lookupType: 6 - substFormat: 1 is not yet supported
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.filter (<anonymous>)
}
[cause]: Error: lookupType: 6 - substFormat: 1 is not yet supported
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.filter (<anonymous>)
}