Element in Div Doesn't Work
Unanswered
Masai Lion posted this in #help-forum

Masai LionOP
Hello! I am using Vercel's OG service for the first time and I am encountering a major issue. When I use
<div> <div> <span> </span> </div> </div>
nothing shows up in the preview (it doesn't matter what tag is in the second div). However, when I use <div> <p> <span> </span> </p> </div>
it works (I can replace p
with any tag). Here is my code:import { ImageResponse } from 'next/og';
export async function GET() {
return new ImageResponse(
(
<div
style={{
fontSize: 40,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
padding: '50px 200px',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
👋 Hello
<div>
<span>
Test
</span>
</div>
</div>
),
{
width: 1200,
height: 630,
},
);
}