Skip to content
Github

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 the tw= prop instead of className.
  • 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>
  );
};