Skip to content
FrogUI

Frog.image Response

The response returned from the .image handler.

import { Frog } from 'frog'
 
export const app = new Frog({
  title: 'Frog Frame',
})
 
app.image('/', (c) => {
  return c.res({
    // ...
  })
})

headers

  • Type: Record<string, string>

HTTP response headers to set for the image.

import { Button, Frog } from 'frog'
 
export const app = new Frog({
  title: 'Frog Frame',
})
 
 
app.image('/image/foo', (c) => {
  return c.res({
    headers: {
      'cache-control': 'max-age=0',
    },
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a frog
      </div>
    )
  })
})

image

  • Type: string

The Image to render for the image. Must be a JSX element.

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

imageOptions

  • Type: ImageResponseOptions

Options for the image to render for the image.

import { Button, Frog } from 'frog'
 
export const app = new Frog({
  title: 'Frog Frame',
})
 
app.image('/', (c) => {
  return c.res({
    image: ( 
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}> 
        Select a frog 
      </div> 
    ), 
    imageOptions: {
      height: 600,
      width: 600,
    }
  })
})