make static image import output path consistent with other media #30168

sokra · 2021-10-22T09:06:10Z

This will ensure an image hashed consistently regardless of how its imported:

import file from "./file.png" -> /_next/static/media/file.12345678.png
url(./file.png) -> /_next/static/media/file.12345678.png
new URL("./file.png", import.meta.url) -> /_next/static/media/file.12345678.png

This also fixes an issue on Windows when the path is too long.

ijjk · 2021-10-22T11:06:11Z

Failing test suites

Commit: 1effef6

test/development/basic-basepath/hmr.test.ts

basic HMR > Error Recovery > should recover after undefined exported as default

Expand output

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  603 |         await next.patchFile(aboutPage, aboutContent)
  604 |
> 605 |         if (browser) {
      |                       ^
  606 |           await check(
  607 |             () => getBrowserBodyText(browser),
  608 |             /This is the about page/

  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:605:23)

ijjk · 2021-10-22T12:05:54Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
buildDuration	12.7s	12.6s	-119ms
buildDurationCached	2.8s	3.1s	⚠️ +208ms
nodeModulesSize	196 MB	196 MB	-5 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.89	2.881	-0.01
/ avg req/sec	865.08	867.83	+2.75
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.377	1.438	⚠️ +0.06
/error-in-render avg req/sec	1814.9	1738.85	⚠️ -76.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
651.cd440d20..0b23.js gzip	2.96 kB	2.96 kB	✓
831.695e33f6..205f.js gzip	179 B	179 B	✓
framework-89..a097.js gzip	42.2 kB	42.2 kB	✓
main-6c9ec8a..39ec.js gzip	26.1 kB	26.1 kB	✓
webpack-f09b..493e.js gzip	1.47 kB	1.47 kB	✓
Overall change	73 kB	73 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
_app-9fb8765..c13d.js gzip	979 B	979 B	✓
_error-d828d..2954.js gzip	3.06 kB	3.06 kB	✓
amp-5388d1f5..4ce9.js gzip	551 B	551 B	✓
css-10424225..367a.js gzip	329 B	329 B	✓
dynamic-9821..3cd4.js gzip	2.67 kB	2.67 kB	✓
head-1df323b..d261.js gzip	2.32 kB	2.32 kB	✓
hooks-ab0016..b093.js gzip	917 B	917 B	✓
image-c3cc30..4e2a.js gzip	5.87 kB	5.85 kB	-23 B
index-95c8cb..6970.js gzip	260 B	260 B	✓
link-05c99e7..35ec.js gzip	1.66 kB	1.66 kB	✓
routerDirect..6659.js gzip	319 B	319 B	✓
script-d94ba..ed05.js gzip	386 B	386 B	✓
withRouter-7..8b2e.js gzip	317 B	317 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	19.8 kB	19.7 kB	-23 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
_buildManifest.js gzip	458 B	460 B	⚠️ +2 B
Overall change	458 B	460 B	⚠️ +2 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
index.html gzip	536 B	536 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-a9a93d991a2a6a9c.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e040764724fe6a41.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-a4027db8f96167d6.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-465e164f10b333ba.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f632234727179322.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-df7921033b292f8a.js"

Diff for image-a4027d..8f96167d6.js

@@ -1576,8 +1576,7 @@
       // EXTERNAL MODULE: ./node_modules/next/image.js
       var next_image = __webpack_require__(5675); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
-        src:
-          "/_next/static/image/pages/nextjs.ec6e0a99bfda8e881aa8401c2d6fccec.png",
+        src: "/_next/static/media/nextjs.ec6e0a99.png",
         height: 1347,
         width: 1626,
         blurDataURL:

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
buildDuration	6s	6.1s	⚠️ +121ms
buildDurationCached	2.8s	2.8s	-74ms
nodeModulesSize	196 MB	196 MB	-5 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.85	2.866	⚠️ +0.02
/ avg req/sec	877.12	872.3	⚠️ -4.82
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.342	1.332	-0.01
/error-in-render avg req/sec	1862.81	1877.22	+14.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
450.fd3ad245..022b.js gzip	179 B	179 B	✓
675-228d3e2f..0c27.js gzip	13.8 kB	13.8 kB	✓
framework-13..70b0.js gzip	50.8 kB	50.8 kB	✓
main-24da2a3..cbb3.js gzip	36.5 kB	36.5 kB	✓
webpack-a7f2..2650.js gzip	1.63 kB	1.63 kB	✓
Overall change	103 kB	103 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
_app-ae91bc3..d985.js gzip	1.33 kB	1.33 kB	✓
_error-273ac..9ef0.js gzip	180 B	180 B	✓
amp-5f9a7694..99ce.js gzip	315 B	315 B	✓
css-3a1b2477..df1e.js gzip	330 B	330 B	✓
dynamic-e04a..a1b5.js gzip	2.79 kB	2.79 kB	✓
head-7f600d0..daa3.js gzip	356 B	356 B	✓
hooks-bd8c02..0730.js gzip	638 B	638 B	✓
image-16df09..4584.js gzip	555 B	536 B	-19 B
index-80be94..e89f.js gzip	262 B	262 B	✓
link-4ee1ea7..8745.js gzip	2.22 kB	2.22 kB	✓
routerDirect..c4aa.js gzip	325 B	325 B	✓
script-67da0..49e6.js gzip	390 B	390 B	✓
withRouter-2..2409.js gzip	322 B	322 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	-19 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
_buildManifest.js gzip	477 B	477 B	✓
Overall change	477 B	477 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js bugfix/static-image-path	Change
index.html gzip	535 B	535 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	529 B	529 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -14,7 +14,7 @@ self.__BUILD_MANIFEST = {
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
   "/image": [
     "static\u002Fchunks\u002F675-7db1bce67c3eab1e.js",
-    "static\u002Fchunks\u002Fpages\u002Fimage-16126fc55fe0de81.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-bf3853b512dffdf0.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7111a5bd9b78e6ce.js"],
   "/routerDirect": [

Diff for image-16126f..55fe0de81.js

@@ -42,8 +42,7 @@
       // EXTERNAL MODULE: ./node_modules/next/image.js
       var next_image = __webpack_require__(5675); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
-        src:
-          "/_next/static/image/pages/nextjs.ec6e0a99bfda8e881aa8401c2d6fccec.png",
+        src: "/_next/static/media/nextjs.ec6e0a99.png",
         height: 1347,
         width: 1626,
         blurDataURL:

Commit: cd666b6

styfle

We document <distDir>/cache/images so that would need to be updated too

https://nextjs.org/docs/api-reference/next/image#caching-behavior

However, I don't see any advantage to changing this besides invalidating everyones cache and making it more difficult to purge images manually.

styfle

I realize now that this isn't changing the cache dir so this looks good to me, thanks! 👍

I also updated the description so its clear why this is changing.

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

This comment has been minimized.

Sign in to view

sokra force-pushed the bugfix/static-image-path branch 2 times, most recently from 6772c96 to 9543cce Compare October 22, 2021 09:51

This comment has been minimized.

Sign in to view

make static image import output path consistent with other media

c96379b

sokra force-pushed the bugfix/static-image-path branch from 9543cce to c96379b Compare October 22, 2021 10:35

sokra added 2 commits October 22, 2021 12:35

Merge branch 'canary' into bugfix/static-image-path

378d790

update test case

1effef6

This comment has been minimized.

Sign in to view

sokra marked this pull request as ready for review October 22, 2021 11:51

sokra requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners October 22, 2021 11:51

Merge branch 'canary' into bugfix/static-image-path

cd666b6

styfle requested changes Oct 22, 2021

View reviewed changes

styfle approved these changes Oct 22, 2021

View reviewed changes

kodiakhq bot merged commit 5c35066 into canary Oct 22, 2021

kodiakhq bot deleted the bugfix/static-image-path branch October 22, 2021 13:25

styfle added the hacktoberfest-accepted label Oct 25, 2021

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

make static image import output path consistent with other media #30168

make static image import output path consistent with other media #30168

sokra commented Oct 22, 2021 •

edited by styfle

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 22, 2021

ijjk commented Oct 22, 2021

Diffs

Diffs

styfle left a comment •

edited

Loading

styfle left a comment •

edited

Loading

make static image import output path consistent with other media #30168

make static image import output path consistent with other media #30168

Conversation

sokra commented Oct 22, 2021 • edited by styfle Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 22, 2021

Failing test suites

ijjk commented Oct 22, 2021

Stats from current PR

Diffs

Diffs

styfle left a comment • edited Loading

Choose a reason for hiding this comment

styfle left a comment • edited Loading

Choose a reason for hiding this comment

sokra commented Oct 22, 2021 •

edited by styfle

Loading

styfle left a comment •

edited

Loading

styfle left a comment •

edited

Loading