diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts
index 8ff3d3c6c96cb..53d63bad6a17a 100644
--- a/packages/next/server/config.ts
+++ b/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(
diff --git a/test/integration/next-image-new/both-basepath-trailingslash/next.config.js b/test/integration/next-image-new/both-basepath-trailingslash/next.config.js
new file mode 100644
index 0000000000000..32b285f258ecd
--- /dev/null
+++ b/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],
+ },
+}
diff --git a/test/integration/next-image-new/both-basepath-trailingslash/pages/index.js b/test/integration/next-image-new/both-basepath-trailingslash/pages/index.js
new file mode 100644
index 0000000000000..40aeb172afe0d
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default Page
diff --git a/test/integration/next-image-new/both-basepath-trailingslash/public/test.jpg b/test/integration/next-image-new/both-basepath-trailingslash/public/test.jpg
new file mode 100644
index 0000000000000..d536c882412ed
Binary files /dev/null and b/test/integration/next-image-new/both-basepath-trailingslash/public/test.jpg differ
diff --git a/test/integration/next-image-new/both-basepath-trailingslash/test/index.test.ts b/test/integration/next-image-new/both-basepath-trailingslash/test/index.test.ts
new file mode 100644
index 0000000000000..f3c0ed6b8fd15
--- /dev/null
+++ b/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()
+ })
+})