FrameImage
Renders a fc:frame:image
.
Props
src: string
: The source of the image
OR
children: React.ReactNode
: JSX to be rendered to the frame image. Supports tailwind via thetw=
prop instead ofclassName
.options: SatoriOptions
: Options to be passed to Satori for rendering the image (e.g. fonts).
Usage with src
./app/page.tsx
import { FrameButton, FrameContainer, FrameImage } from "frames.js/next/server";
return function Home() {
return (
<FrameContainer
postUrl="/frames"
state={state}
previousFrame={previousFrame}
>
<FrameImage src="https://picsum.photos/seed/frames.js/1146/600" />
<FrameButton action="link" target={`https://www.google.com`}>External</FrameButton>
</FrameContainer>
);
};
Usage with React
./app/page.tsx
import { FrameButton, FrameContainer, FrameImage } from "frames.js/next/server";
return function Home() {
return (
<FrameContainer
postUrl="/frames"
state={state}
previousFrame={previousFrame}
>
<FrameImage>
<div tw="w-full h-full bg-black text-white justify-center items-center">
Hello world
</div>
</FrameImage>
<FrameButton href={`https://www.google.com`}>External</FrameButton>
</FrameContainer>
);
};