Not able to load images

[ishaan812]

`
import { Button, Frog, TextInput } from "frog";
import { handle } from "frog/next";
import { makeFrogFrame } from "~~/utils/general";

const app = new Frog({
basePath: "/api/frog",
title: "Frog Frame",
});

app.frame(/:frameId, async c => {
return c.res({
image: <div style={{ color: "white", display: "flex", fontSize: 15 }}>Select your fruit!,
intents: [
Apple,
Banana,
Mango,
],
});
});

export const GET = handle(app);
export const POST = handle(app);
`

Not able to generate images tried with an image handler too by creating another route '/img' and passing image through there and having image attribute as '/img'. Not able to generate html images. Have tried everything. The path is correct.

[dalechyn]

cannot reproduce, which URL are you checking out?

would appreciate a min. repro.

[ishaan812]

So Im working on a NextJs project, we have,

In /api/[[...routes]]

We have,

/** @jsxImportSource frog/jsx */
import { Button, Frog, TextInput } from "frog";
import { devtools } from "frog/dev";
// import { neynar } from 'frog/hubs'
import { handle } from "frog/next";
import { serveStatic } from "frog/serve-static";

const app = new Frog({
  assetsPath: "/",
  basePath: "/api",
  title: "Frog Frame",
});

app.frame("/", c => {
  const { status } = c;
  return c.res({
    image: (
      <div
        style={{
          alignItems: "center",
          background: status === "response" ? "linear-gradient(to right, #432889, #17101F)" : "black",
          backgroundSize: "100% 100%",
          display: "flex",
          flexDirection: "column",
          flexWrap: "nowrap",
          height: "100%",
          justifyContent: "center",
          textAlign: "center",
          width: "100%",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
          }}
        >
          Test Frame
        </div>
      </div>
    ),
    intents: [
      <TextInput placeholder="Enter custom fruit..." />,
      <Button value="apples">Apples</Button>,
      <Button value="oranges">Oranges</Button>,
      <Button value="bananas">Bananas</Button>,
      status === "response" && <Button.Reset>Reset</Button.Reset>,
    ],
  });
});

devtools(app, { serveStatic });

export const GET = handle(app);
export const POST = handle(app);

Which works completely fine. HTML Rendering and all, this is from the test next js repo. Although now ive written another api, in /api/frog/:frameId where based on the id I get I want to render a frame I render from a json file. Its all the same code and ive tried a bunch but cant figure it out.

This is the code for that,

/* eslint-disable react/jsx-key */

/** @jsxImportSource frog/jsx */
import { Button, Frog } from "frog";
import { devtools } from "frog/dev";
import { handle } from "frog/next";
import { serveStatic } from "frog/serve-static";

const app = new Frog({
  assetsPath: "/",
  basePath: "/api/frog",
  title: "Frog Frame",
});

app.frame("/:frameId", c => {
  return c.res({
    image: (
      <div
        style={{
          alignItems: "center",
          background: status === "response" ? "linear-gradient(to right, #432889, #17101F)" : "black",
          backgroundSize: "100% 100%",
          display: "flex",
          flexDirection: "column",
          flexWrap: "nowrap",
          height: "100%",
          justifyContent: "center",
          textAlign: "center",
          width: "100%",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
          }}
        >
          Random vibes
        </div>
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>,
    ],
  });
});

devtools(app, { serveStatic });

export const GET = handle(app);
export const POST = handle(app);

For now I haven't done the fetching from a JSON file just trying to make this work since this is a blocker.

[dalechyn]

there are multuple specifics of nextjs itself so min. repro would be greatly appreciated.

i have to take a guess based on what you've said that your new file is located at /api/frog/:frameId/route.tsx. If so, it should be changed to /api/frog/[[...routes]/route.tsx, because image rendering is a subroute and not gonna work otherwise. the catch-all route group is very important here.

if I got you wrong, please create a minimal repro, not just a code. something that I can clone and run.

[ishaan812]

Yup, thats what I was missing, thanks a lot! sorry for the lazy min repro. just a follow up question is there anyway, I can implement it in the way I am right now with an image handler. As mentioned here https://frog.fm/concepts/image-handler. Without the catch all?

[dalechyn]

if you separate it into a different file and path, you should be able to!