Dynamic Og Image with img tag and external resource
Unanswered
Vespid wasp posted this in #help-forum
Vespid waspOP
import { ImageResponse } from "next/og";
// Image metadata
export const alt = "testing";
export const size = {
width: 1200,
height: 630,
};
export const contentType = "image/jpeg";
// Image generation
export default async function Image() {
const imageRes = await fetch("https://github.com/shadcn.png");
const arrayBuffer = await imageRes.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
const base64 = buffer.toString("base64");
const logoSrc =data:image/jpeg;base64,${base64};
console.log(logoSrc);
return new ImageResponse(
(
<div
style={{
minHeight: "100vh",
backgroundColor: "#f3f4f6",
display: "flex", // ✅ explicit flex
alignItems: "center",
justifyContent: "center",
padding: "2rem",
}}
>
<img
src={logoSrc}
alt={alt}
style={{
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: "bottom",
}}
/>
</div>
),
{
...size,
contentType,
alt,
},
);
}In Next.js, the dynamic OG image file opengraph-image.tsx — is it unable to generate OG images that include external resources coming from an API?