Ensure static image works correctly with basePath #29307

ijjk · 2021-09-22T20:54:46Z

This ensures we prefix the src for static images with the basePath correctly, this also copies over the static image tests to the basePath image-component suite.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Fixes: #29289

styfle

Should these tests include basePath so we know when they fail?

test/integration/image-component/base-path/test/static.test.js

Co-authored-by: Steven <steven@ceriously.com>

ijjk · 2021-09-23T23:06:21Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
buildDuration	15s	15.3s	⚠️ +297ms
buildDurationCached	3.9s	4s	⚠️ +69ms
nodeModulesSize	182 MB	182 MB	⚠️ +794 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.283	3.221	-0.06
/ avg req/sec	761.61	776.06	+14.45
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.742	1.714	-0.03
/error-in-render avg req/sec	1434.73	1458.86	+24.13

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	26.8 kB	26.8 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.6 kB	70.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
_buildManifest.js gzip	493 B	493 B	✓
Overall change	493 B	493 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
index.html gzip	538 B	538 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
buildDuration	8s	7.8s	-206ms
buildDurationCached	3.8s	3.7s	-40ms
nodeModulesSize	182 MB	182 MB	⚠️ +794 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.204	3.257	⚠️ +0.05
/ avg req/sec	780.18	767.58	⚠️ -12.6
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.656	1.626	-0.03
/error-in-render avg req/sec	1509.92	1537.29	+27.37

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
675-HASH.js gzip	13.8 kB	13.8 kB	✓
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	34.7 kB	34.7 kB	✓
webpack-HASH.js gzip	1.65 kB	1.65 kB	✓
Overall change	101 kB	101 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
_app-HASH.js gzip	1.32 kB	1.32 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.8 kB	2.8 kB	✓
head-HASH.js gzip	356 B	356 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	573 B	573 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	2.2 kB	2.2 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js fix/static-image-basepath	Change
index.html gzip	538 B	538 B	✓
link.html gzip	552 B	552 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Commit: e1ead66

Follow-up to #29307 this ensures the `blurDataURL` is correctly prefixed with the `basePath` in development since we use the `_next/image` endpoint to generate the placeholder in dev mode. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md` Fixes: #29289 (comment)

Ensure static image works correctly with basePath

978c7bf

ijjk requested review from huozhi, padmaia, shuding, styfle and timneutkens as code owners September 22, 2021 20:54

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Sep 22, 2021

This comment has been minimized.

Sign in to view

ijjk added 2 commits September 22, 2021 17:20

Merge branch 'canary' into fix/static-image-basepath

aa6b722

Ensure next/image can use assetPrefix

82e9633

This comment has been minimized.

Sign in to view

styfle reviewed Sep 22, 2021

View reviewed changes

test/integration/image-component/base-path/test/static.test.js Outdated Show resolved Hide resolved

test/integration/image-component/base-path/test/static.test.js Outdated Show resolved Hide resolved

ijjk and others added 2 commits September 22, 2021 18:38

Apply suggestions from code review

e5ccc6e

Co-authored-by: Steven <steven@ceriously.com>

Merge branch 'canary' into fix/static-image-basepath

7bd34e9

ijjk requested a review from styfle September 22, 2021 23:42

This comment has been minimized.

Sign in to view

styfle approved these changes Sep 23, 2021

View reviewed changes

Merge branch 'canary' into fix/static-image-basepath

965b088

This comment has been minimized.

Sign in to view

Merge branch 'canary' into fix/static-image-basepath

e1ead66

kodiakhq bot merged commit 5dbb870 into vercel:canary Sep 23, 2021

ijjk deleted the fix/static-image-basepath branch September 23, 2021 23:31

ijjk mentioned this pull request Sep 27, 2021

Ensure blurDataURL is correct in dev with basePath #29436

Merged

3 tasks

This was referenced Sep 28, 2021

fix: asset prefix on images #28306

Closed

next-image-loader does not respect assetPrefix #28305

Closed

ofhouse mentioned this pull request Oct 12, 2021

Add option for basePath milliHQ/terraform-aws-next-js-image-optimization#74

Open

1 task

thibautsabot mentioned this pull request Oct 15, 2021

When using basePath and statically imported images with next/image, loader must be used to add the base path #29910

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure static image works correctly with basePath #29307

Ensure static image works correctly with basePath #29307

ijjk commented Sep 22, 2021

This comment has been minimized.

This comment has been minimized.

styfle left a comment

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 23, 2021

Ensure static image works correctly with basePath #29307

Ensure static image works correctly with basePath #29307

Conversation

ijjk commented Sep 22, 2021

Bug

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 23, 2021

Stats from current PR