feat(next/image): add `overrideSrc` prop #64221

styfle · 2024-04-08T20:01:14Z

ijjk · 2024-04-08T20:09:59Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
buildDuration	15.1s	15.1s	N/A
buildDurationCached	8.3s	7s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +398 B
nextStartRea..uration (ms)	412ms	415ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
2453-HASH.js gzip	31.4 kB	31.4 kB	N/A
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	✓
8299-HASH.js gzip	5.04 kB	5.05 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	242 B	242 B	✓
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	99.3 kB	99.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.21 kB	4.22 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	2.36 kB	2.36 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
_buildManifest.js gzip	481 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
index.html gzip	529 B	529 B	✓
link.html gzip	542 B	541 B	N/A
withRouter.html gzip	524 B	523 B	N/A
Overall change	529 B	529 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
edge-ssr.js gzip	95.4 kB	95.4 kB	N/A
page.js gzip	3.06 kB	3.06 kB	✓
Overall change	3.06 kB	3.06 kB	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
middleware-b..fest.js gzip	625 B	625 B	✓
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.61 kB	1.61 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
app-page-exp...dev.js gzip	170 kB	170 kB	✓
app-page-exp..prod.js gzip	97.3 kB	97.3 kB	✓
app-page-tur..prod.js gzip	99.1 kB	99.1 kB	✓
app-page-tur..prod.js gzip	93.3 kB	93.3 kB	✓
app-page.run...dev.js gzip	144 kB	144 kB	✓
app-page.run..prod.js gzip	91.8 kB	91.8 kB	✓
app-route-ex...dev.js gzip	21.4 kB	21.4 kB	✓
app-route-ex..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.1 kB	21.1 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	22.5 kB	22.5 kB	✓
pages.runtim...dev.js gzip	23.1 kB	23.1 kB	✓
pages.runtim..prod.js gzip	22.4 kB	22.4 kB	✓
server.runti..prod.js gzip	51.1 kB	51.1 kB	✓
Overall change	947 kB	947 kB	✓

build cache

	vercel/next.js canary	vercel/next.js styfle/next-2087-better-seo-for-nextimage	Change
0.pack gzip	1.58 MB	1.58 MB	N/A
index.pack gzip	107 kB	107 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for middleware.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 1552: /***/ function (
+    /***/ 4070: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ function (module, exports, __webpack_require__) {
+    /***/ 8490: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ function (
+    /***/ 7932: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -532,6 +532,7 @@
           height,
           fill = false,
           style,
+          overrideSrc,
           onLoad,
           onLoadingComplete,
           placeholder = "empty",
@@ -749,7 +750,7 @@
           },
           sizes: imgAttributes.sizes,
           srcSet: imgAttributes.srcSet,
-          src: imgAttributes.src,
+          src: overrideSrc || imgAttributes.src,
         };
         const meta = {
           unoptimized,
@@ -766,7 +767,7 @@
       /***/
     },
 
-    /***/ 133: /***/ function (__unused_webpack_module, exports) {
+    /***/ 2642: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -821,7 +822,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ function (
+    /***/ 503: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -848,10 +849,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(2430);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -883,7 +884,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7240: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -918,7 +919,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ function (
+    /***/ 396: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -939,8 +940,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -970,12 +971,12 @@
       /***/
     },
 
-    /***/ 1577: /***/ function (
+    /***/ 73: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4085);
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -986,7 +987,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [2888, 9774, 179], function () {
-      return __webpack_exec__(1552);
+      return __webpack_exec__(4070);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 8299-HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8299],
+  [2764],
   {
-    /***/ 8299: /***/ function (module, exports, __webpack_require__) {
+    /***/ 2764: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,25 +13,25 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(4777);
-      const _interop_require_wildcard = __webpack_require__(353);
-      const _jsxruntime = __webpack_require__(6435);
+      const _interop_require_default = __webpack_require__(9380);
+      const _interop_require_wildcard = __webpack_require__(2077);
+      const _jsxruntime = __webpack_require__(2260);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4364)
+        __webpack_require__(7)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9369)
+        __webpack_require__(5175)
       );
-      const _getimgprops = __webpack_require__(2564);
-      const _imageconfig = __webpack_require__(578);
-      const _imageconfigcontextsharedruntime = __webpack_require__(8589);
-      const _warnonce = __webpack_require__(2528);
-      const _routercontextsharedruntime = __webpack_require__(2339);
+      const _getimgprops = __webpack_require__(7253);
+      const _imageconfig = __webpack_require__(6491);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9382);
+      const _warnonce = __webpack_require__(3848);
+      const _routercontextsharedruntime = __webpack_require__(7897);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1300)
+        __webpack_require__(3366)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -363,7 +363,7 @@
       /***/
     },
 
-    /***/ 5416: /***/ function (
+    /***/ 7121: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -377,9 +377,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(4777);
+      const _interop_require_default = __webpack_require__(9380);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -388,7 +388,7 @@
       /***/
     },
 
-    /***/ 9392: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7960: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -410,7 +410,7 @@
       /***/
     },
 
-    /***/ 2564: /***/ function (
+    /***/ 7253: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -424,9 +424,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(2528);
-      const _imageblursvg = __webpack_require__(7910);
-      const _imageconfig = __webpack_require__(578);
+      const _warnonce = __webpack_require__(3848);
+      const _imageblursvg = __webpack_require__(558);
+      const _imageconfig = __webpack_require__(6491);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -561,6 +561,7 @@
           height,
           fill = false,
           style,
+          overrideSrc,
           onLoad,
           onLoadingComplete,
           placeholder = "empty",
@@ -778,7 +779,7 @@
           },
           sizes: imgAttributes.sizes,
           srcSet: imgAttributes.srcSet,
-          src: imgAttributes.src,
+          src: overrideSrc || imgAttributes.src,
         };
         const meta = {
           unoptimized,
@@ -795,7 +796,7 @@
       /***/
     },
 
-    /***/ 9369: /***/ function (module, exports, __webpack_require__) {
+    /***/ 5175: /***/ function (module, exports, __webpack_require__) {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -816,19 +817,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(4777);
-      const _interop_require_wildcard = __webpack_require__(353);
-      const _jsxruntime = __webpack_require__(6435);
+      const _interop_require_default = __webpack_require__(9380);
+      const _interop_require_wildcard = __webpack_require__(2077);
+      const _jsxruntime = __webpack_require__(2260);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1620)
+        __webpack_require__(5894)
       );
-      const _ampcontextsharedruntime = __webpack_require__(5416);
-      const _headmanagercontextsharedruntime = __webpack_require__(7662);
-      const _ampmode = __webpack_require__(9392);
-      const _warnonce = __webpack_require__(2528);
+      const _ampcontextsharedruntime = __webpack_require__(7121);
+      const _headmanagercontextsharedruntime = __webpack_require__(5237);
+      const _ampmode = __webpack_require__(7960);
+      const _warnonce = __webpack_require__(3848);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1004,7 +1005,7 @@
       /***/
     },
 
-    /***/ 7910: /***/ function (__unused_webpack_module, exports) {
+    /***/ 558: /***/ function (__unused_webpack_module, exports) {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1058,7 +1059,7 @@
       /***/
     },
 
-    /***/ 8589: /***/ function (
+    /***/ 9382: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1072,11 +1073,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(4777);
+      const _interop_require_default = __webpack_require__(9380);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
-      const _imageconfig = __webpack_require__(578);
+      const _imageconfig = __webpack_require__(6491);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1086,7 +1087,7 @@
       /***/
     },
 
-    /***/ 578: /***/ function (__unused_webpack_module, exports) {
+    /***/ 6491: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1133,7 +1134,7 @@
       /***/
     },
 
-    /***/ 1300: /***/ function (__unused_webpack_module, exports) {
+    /***/ 3366: /***/ function (__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1166,7 +1167,7 @@
       /***/
     },
 
-    /***/ 2339: /***/ function (
+    /***/ 7897: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1180,9 +1181,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(4777);
+      const _interop_require_default = __webpack_require__(9380);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8288)
+        __webpack_require__(4978)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1191,7 +1192,7 @@
       /***/
     },
 
-    /***/ 1620: /***/ function (
+    /***/ 5894: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1205,7 +1206,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(8288);
+      const _react = __webpack_require__(4978);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}

Commit: 65bc160

docs/02-app/02-api-reference/01-components/image.mdx

ijjk · 2024-04-09T13:24:46Z

Tests Passed

leerob

Docs LGTM

feat(next/image): add overrideSrc prop

e009f75

styfle requested review from timneutkens, ijjk, shuding, huozhi, ztanner and a team as code owners April 8, 2024 20:01

styfle requested review from ismaelrumzan and StephDietz and removed request for a team April 8, 2024 20:01

ijjk added area: documentation created-by: Next.js team PRs by the Next.js team type: next labels Apr 8, 2024

feedthejim approved these changes Apr 8, 2024

View reviewed changes

leerob reviewed Apr 8, 2024

View reviewed changes

docs/02-app/02-api-reference/01-components/image.mdx Outdated Show resolved Hide resolved

styfle added 2 commits April 8, 2024 16:25

add example snippets to docs

520c6e2

more explicit override

0d3d5d3

styfle requested a review from leerob April 8, 2024 20:35

leerob reviewed Apr 9, 2024

View reviewed changes

docs/02-app/02-api-reference/01-components/image.mdx Outdated Show resolved Hide resolved

styfle added 3 commits April 9, 2024 09:17

add filename to code block

7edcca0

fix html code snippet

39a2ac2

fix jsx syntax

d5d051f

styfle requested a review from leerob April 9, 2024 13:20

leerob approved these changes Apr 9, 2024

View reviewed changes

styfle added 2 commits April 9, 2024 09:29

Merge branch 'canary' into styfle/next-2087-better-seo-for-nextimage

9f3a5d7

Merge branch 'canary' into styfle/next-2087-better-seo-for-nextimage

65bc160

styfle merged commit 8c9c1d2 into canary Apr 9, 2024
77 of 79 checks passed

styfle deleted the styfle/next-2087-better-seo-for-nextimage branch April 9, 2024 14:48

github-actions bot added the locked label Apr 24, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(next/image): add `overrideSrc` prop #64221

feat(next/image): add `overrideSrc` prop #64221

styfle commented Apr 8, 2024 •

edited

ijjk commented Apr 8, 2024 •

edited

ijjk commented Apr 9, 2024 •

edited

leerob left a comment

feat(next/image): add overrideSrc prop #64221

feat(next/image): add overrideSrc prop #64221

Conversation

styfle commented Apr 8, 2024 • edited

ijjk commented Apr 8, 2024 • edited

Stats from current PR

ijjk commented Apr 9, 2024 • edited

Tests Passed

leerob left a comment

Choose a reason for hiding this comment

feat(next/image): add `overrideSrc` prop #64221

feat(next/image): add `overrideSrc` prop #64221

styfle commented Apr 8, 2024 •

edited

ijjk commented Apr 8, 2024 •

edited

ijjk commented Apr 9, 2024 •

edited