Skip to content

Commit b0a1e99

Browse files
authored
Fix next/image 404 when basePath and trailingSlash defined (#44312)
- Fixes #36681
1 parent f0aa10b commit b0a1e99

File tree

5 files changed

+98
-4
lines changed

5 files changed

+98
-4
lines changed

packages/next/server/config.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,10 @@ function assignDefaults(dir: string, userConfig: { [key: string]: any }) {
447447
)
448448
}
449449

450+
if (images.path === imageConfigDefault.path && result.basePath) {
451+
images.path = `${result.basePath}${images.path}`
452+
}
453+
450454
// Append trailing slash for non-default loaders and when trailingSlash is set
451455
if (images.path) {
452456
if (
@@ -458,10 +462,6 @@ function assignDefaults(dir: string, userConfig: { [key: string]: any }) {
458462
}
459463
}
460464

461-
if (images.path === imageConfigDefault.path && result.basePath) {
462-
images.path = `${result.basePath}${images.path}`
463-
}
464-
465465
if (images.loaderFile) {
466466
if (images.loader !== 'default' && images.loader !== 'custom') {
467467
throw new Error(
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
basePath: '/prefix',
3+
trailingSlash: true,
4+
images: {
5+
deviceSizes: [640, 828],
6+
},
7+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import Image from 'next/image'
3+
import img from '../public/test.jpg'
4+
5+
const Page = () => {
6+
return (
7+
<div>
8+
<p>Trailing Slash</p>
9+
<Image id="import-img" alt="import-img" src={img} priority />
10+
<br />
11+
<Image
12+
id="string-img"
13+
alt="string-img"
14+
src="/prefix/test.jpg"
15+
width={200}
16+
height={200}
17+
/>
18+
</div>
19+
)
20+
}
21+
22+
export default Page
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* eslint-env jest */
2+
3+
import {
4+
fetchViaHTTP,
5+
findPort,
6+
killApp,
7+
launchApp,
8+
nextBuild,
9+
nextStart,
10+
} from 'next-test-utils'
11+
import webdriver from 'next-webdriver'
12+
import { join } from 'path'
13+
14+
const appDir = join(__dirname, '../')
15+
16+
let appPort
17+
let app
18+
19+
const runTests = () => {
20+
it('should correctly load image src from import', async () => {
21+
expect.assertions(3)
22+
const browser = await webdriver(appPort, '/prefix/')
23+
const img = await browser.elementById('import-img')
24+
const src = await img.getAttribute('src')
25+
expect(src).toBe(
26+
'/prefix/_next/image/?url=%2Fprefix%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75'
27+
)
28+
const res = await fetchViaHTTP(appPort, src)
29+
expect(res.status).toBe(200)
30+
expect(res.headers.get('content-type')).toBe('image/jpeg')
31+
})
32+
it('should correctly load image src from string', async () => {
33+
expect.assertions(3)
34+
const browser = await webdriver(appPort, '/prefix/')
35+
const img = await browser.elementById('string-img')
36+
const src = await img.getAttribute('src')
37+
expect(src).toBe('/prefix/_next/image/?url=%2Fprefix%2Ftest.jpg&w=640&q=75')
38+
const res = await fetchViaHTTP(appPort, src)
39+
expect(res.status).toBe(200)
40+
expect(res.headers.get('content-type')).toBe('image/jpeg')
41+
})
42+
}
43+
44+
describe('Image Component basePath + trailingSlash Tests', () => {
45+
describe('dev mode', () => {
46+
beforeAll(async () => {
47+
appPort = await findPort()
48+
app = await launchApp(appDir, appPort)
49+
})
50+
afterAll(() => killApp(app))
51+
52+
runTests()
53+
})
54+
55+
describe('server mode', () => {
56+
beforeAll(async () => {
57+
await nextBuild(appDir)
58+
appPort = await findPort()
59+
app = await nextStart(appDir, appPort)
60+
})
61+
afterAll(() => killApp(app))
62+
63+
runTests()
64+
})
65+
})

0 commit comments

Comments
 (0)