Fix next/image 404 when basePath and trailingSlash defined (#44312

)

- Fixes #36681

packages/next/server/config.ts

@@ -447,6 +447,10 @@ function assignDefaults(dir: string, userConfig: { [key: string]: any }) {
       )
     }
 
+    if (images.path === imageConfigDefault.path && result.basePath) {
+      images.path = `${result.basePath}${images.path}`
+    }
+
     // Append trailing slash for non-default loaders and when trailingSlash is set
     if (images.path) {
       if (
@@ -458,10 +462,6 @@ function assignDefaults(dir: string, userConfig: { [key: string]: any }) {
       }
     }
 
-    if (images.path === imageConfigDefault.path && result.basePath) {
-      images.path = `${result.basePath}${images.path}`
-    }
-
     if (images.loaderFile) {
       if (images.loader !== 'default' && images.loader !== 'custom') {
         throw new Error(

test/integration/next-image-new/both-basepath-trailingslash/next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  basePath: '/prefix',
+  trailingSlash: true,
+  images: {
+    deviceSizes: [640, 828],
+  },
+}

test/integration/next-image-new/both-basepath-trailingslash/pages/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Image from 'next/image'
+import img from '../public/test.jpg'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Trailing Slash</p>
+      <Image id="import-img" alt="import-img" src={img} priority />
+      <br />
+      <Image
+        id="string-img"
+        alt="string-img"
+        src="/prefix/test.jpg"
+        width={200}
+        height={200}
+      />
+    </div>
+  )
+}
+
+export default Page

test/integration/next-image-new/both-basepath-trailingslash/test/index.test.ts

@@ -0,0 +1,65 @@
+/* eslint-env jest */
+
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+const appDir = join(__dirname, '../')
+
+let appPort
+let app
+
+const runTests = () => {
+  it('should correctly load image src from import', async () => {
+    expect.assertions(3)
+    const browser = await webdriver(appPort, '/prefix/')
+    const img = await browser.elementById('import-img')
+    const src = await img.getAttribute('src')
+    expect(src).toBe(
+      '/prefix/_next/image/?url=%2Fprefix%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75'
+    )
+    const res = await fetchViaHTTP(appPort, src)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toBe('image/jpeg')
+  })
+  it('should correctly load image src from string', async () => {
+    expect.assertions(3)
+    const browser = await webdriver(appPort, '/prefix/')
+    const img = await browser.elementById('string-img')
+    const src = await img.getAttribute('src')
+    expect(src).toBe('/prefix/_next/image/?url=%2Fprefix%2Ftest.jpg&w=640&q=75')
+    const res = await fetchViaHTTP(appPort, src)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toBe('image/jpeg')
+  })
+}
+
+describe('Image Component basePath + trailingSlash Tests', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+
+  describe('server mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+})