Frog.image

Import

import { Frog } from 'frog'

Usage

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.image('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select your fruit!
      </div>
    )
  })
})

Parameters

path

Type: string

Path of the route.

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.image(
  '/foo/bar',
  (c) => {
    return c.res({ 
      image: ( 
        <div style={{ color: 'white', display: 'flex', fontSize: 60 }}> 
          Select your fruit! 
        </div> 
      ) 
    })
  }
)

handler

Type: (c: Context) => ImageResponse

Handler function for the route.

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.image(
  '/foo/bar',
  (c) => {
    return c.res({
      image: (
        <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
          Select your fruit!
        </div>
      )
    })
  }
)

Context Parameter

See the Context API.

Image Response

See the Image Response API.