feat(images): Implement local patterns for images (#740)

Author: sommeeeer

.changeset/shaky-kings-stare.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+feat(images): implement localPatterns for images

examples/playground14/e2e/cloudflare.spec.ts

@@ -19,14 +19,38 @@ test.describe("playground/cloudflare", () => {
     await expect(res.json()).resolves.toEqual(expect.objectContaining({ PROCESS_ENV_VAR: "process.env" }));
   });
 
-  test("fetch an image allowed by remotePatterns", async ({ page }) => {
-    const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248818");
-    expect(res.status()).toBe(200);
-    expect(res.headers()).toMatchObject({ "content-type": "image/jpeg" });
+  test.describe("remotePatterns", () => {
+    test("fetch an image allowed by remotePatterns", async ({ page }) => {
+      const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248818");
+      expect(res.status()).toBe(200);
+      expect(res.headers()).toMatchObject({ "content-type": "image/jpeg" });
+    });
+
+    test("400 when fetching an image disallowed by remotePatterns", async ({ page }) => {
+      const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248817");
+      expect(res.status()).toBe(400);
+    });
   });
 
-  test("404 when fetching an image disallowed by remotePatterns", async ({ page }) => {
-    const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248817");
-    expect(res.status()).toBe(400);
+  test.describe("localPatterns", () => {
+    test("fetch an image allowed by localPatterns", async ({ page }) => {
+      const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes");
+      expect(res.status()).toBe(200);
+      expect(res.headers()).toMatchObject({ "content-type": "image/webp" });
+    });
+
+    test("400 when fetching an image disallowed by localPatterns with wrong query parameter", async ({
+      page,
+    }) => {
+      const res = await page.request.get("/_next/image?url=/snipp/snipp?iscute=no");
+      expect(res.status()).toBe(400);
+    });
+
+    test("400 when fetching an image disallowed by localPatterns without query parameter", async ({
+      page,
+    }) => {
+      const res = await page.request.get("/_next/image?url=/snipp/snipp");
+      expect(res.status()).toBe(400);
+    });
   });
 });

examples/playground14/next.config.mjs

@@ -19,6 +19,12 @@ const nextConfig = {
         pathname: "/u/248818",
       },
     ],
+    localPatterns: [
+      {
+        pathname: "/snipp/**",
+        search: "?iscute=yes",
+      },
+    ],
   },
 };