Normalize root path according to trailingSlash option in default next…

…/image loader #21337 (#22453)

* fix(next/image): normalize root path according to trailingSlash option in defaul loader

* test(image-optimizer): trailingSlash support

* chore(next/image): prettier

Co-authored-by: JJ Kasper <jj@jjsweb.site>

packages/next/client/image.tsx

@@ -9,6 +9,7 @@ import {
 import { useIntersection } from './use-intersection'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { warnOnce } from '../shared/lib/utils'
+import { normalizePathTrailingSlash } from './normalize-trailing-slash'
 
 const configEnv = process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete
 const loadedImageURLs = new Set<string>()
@@ -877,7 +878,7 @@ function defaultLoader({
     return src
   }
 
-  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
-    quality || 75
-  }`
+  return `${normalizePathTrailingSlash(config.path)}?url=${encodeURIComponent(
+    src
+  )}&w=${width}&q=${quality || 75}`
 }

test/integration/image-optimizer/test/index.test.js

@@ -327,6 +327,32 @@ describe('Image Optimizer', () => {
     runTests(ctx)
   })
 
+  describe('Server support for trailingSlash in next.config.js', () => {
+    let app
+    let appPort
+    beforeAll(async () => {
+      nextConfig.replace(
+        '{ /* replaceme */ }',
+        JSON.stringify({
+          trailingSlash: true,
+        })
+      )
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+      nextConfig.restore()
+    })
+
+    it('should return successful response for original loader', async () => {
+      let res
+      const query = { url: '/test.png', w: 8, q: 70 }
+      res = await fetchViaHTTP(appPort, '/_next/image/', query)
+      expect(res.status).toBe(200)
+    })
+  })
+
   describe('Server support for headers in next.config.js', () => {
     const size = 96 // defaults defined in server/config.ts
     let app