How can I get an image directly from the filesystem in Next.js App Router API Route?

[carlos-dubon]

Summary

I’m trying to render an image inside an ImageResponse in an App Router API Route.

Here’s my current code:

import { ImageResponse } from 'next/og';
import { compressArrayBuffer } from '@/util/compress-array-buffer';
import myImage from './myimage.png';

export async function GET(request: Request) {
    try {
        const imageResponse = new ImageResponse(
            (
                <div
                    style={{
                        backgroundColor: 'white',
                        height: 1200,
                        width: 1200,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    <div
                        style={{
                            display: 'flex',
                            position: 'absolute',
                            bottom: 32,
                            right: 32,
                        }}
                    >
                        <img src={myImage} alt="my image" width={100} height={100} />
                    </div>
                </div>
            ),
            {
                width: 1200,
                height: 1200,
            }
        );

        const arrayBuffer = await imageResponse.arrayBuffer();
        const compressedImage = await compressArrayBuffer(arrayBuffer);

        const headers = new Headers();
        headers.set('Content-Type', 'image/jpeg');
        headers.set('Cache-Control', 'public, immutable, no-transform, max-age=31536000');
        return new Response(compressedImage, { status: 200, statusText: 'OK', headers });
    } catch (error: unknown) {
        const errorMessage = `Failed to generate og image ${String(error)}`;
        return new Response(errorMessage, { status: 500 });
    }
}

The problem:

• Importing a static image like import myImage from './myimage.png' doesn’t seem to work inside ImageResponse.
• I’d like to load an image directly from the filesystem (local file inside my repo) and embed it into the ImageResponse.
• Fetching the image (from /public or another route) technically works, but it introduces ~500ms overhead, which is too slow.
• Using fs.readFile to load the image directly doesn’t work in production, since the image file isn’t included in the build output.

What’s the correct way to reference or load local images in this context?

Additional information

No response

Example

No response

[icyJoseph]

Using fs.readFile to load the image directly doesn’t work in production, since the image file isn’t included in the build output.

I believe this should work, if you add export const dynamic = 'force-static' to the route file, right?