Serve /cdn-cgi/image/... images in dev (#491)

Author: vicb

.changeset/wise-gifts-sit.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+Serve `/cdn-cgi/image/...` images in dev

packages/cloudflare/src/cli/templates/worker.ts

@@ -32,6 +32,20 @@ export default {
 
       populateProcessEnv(url, env.NEXTJS_ENV);
 
+      // Serve images in development.
+      // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+      if (url.pathname.startsWith("/cdn-cgi/image/")) {
+        const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+        if (m === null) {
+          return new Response("Not Found!", { status: 404 });
+        }
+        const imageUrl = m.groups!.url!;
+        return imageUrl.match(/^https?:\/\//)
+          ? fetch(imageUrl, { cf: { cacheEverything: true } })
+          : env.ASSETS.fetch(new URL(`/${imageUrl}`, url));
+      }
+
+      // Fallback for the Next default image loader.
       if (url.pathname === "/_next/image") {
         const imageUrl = url.searchParams.get("url") ?? "";
         return imageUrl.startsWith("/")