Support for custom image loaders via image component prop #20216

atcastle · 2020-12-15T23:24:20Z

This is a #19325 reconfigured to support a loader passed in via a loader prop on the Image component, rather than using a config-based approach.

The idea is that applications wanting to use a custom loader will create a wrapper element for the image component that incorporates that loader. See a simple example of this pattern in the integration tests.

This solution is similar to the one prototyped by @ricokahler in #20213 and described at #18606 (comment)

Closes #19325
Fixes #18606

…tom-resolvers

…der-prop

ijjk · 2020-12-15T23:33:35Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	10.3s	10.1s	-231ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +847 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.415	2.402	-0.01
/ avg req/sec	1035.1	1040.67	+5.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.277	1.312	⚠️ +0.04
/error-in-render avg req/sec	1958.44	1905.41	⚠️ -53.03

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..0679.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b992ce4..2479.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59.1 kB	59.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	615 B	615 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	12.1s	12s	-35ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +847 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..0679.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b992ce4..2479.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59.1 kB	59.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: e2ade38

packages/next/client/image.tsx

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

….js into image-component-loader-prop

ijjk · 2020-12-15T23:59:12Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	8.7s	8.6s	-113ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +823 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.034	2.026	-0.01
/ avg req/sec	1229.06	1234.09	+5.03
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.083	1.092	⚠️ +0.01
/error-in-render avg req/sec	2307.59	2290.39	⚠️ -17.2

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..0679.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b992ce4..2479.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59.1 kB	59.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	615 B	615 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	10s	10.1s	⚠️ +51ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +823 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..0679.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b992ce4..2479.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59.1 kB	59.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: cce179e

ricokahler

Looks great! I had a few nit-picky things in there but I love it

packages/next/client/image.tsx

abarnwell · 2020-12-28T11:10:24Z

This is looking great @atcastle, @ricokahler and @styfle, just what I've been looking for. @styfle do we have any idea of when the other code owners are going to be in a position to review this?

…der-prop

ijjk · 2021-01-04T00:52:15Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	10.1s	10.2s	⚠️ +24ms
nodeModulesSize	80.6 MB	80.6 MB	-136 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.997	2.102	⚠️ +0.1
/ avg req/sec	1251.99	1189.54	⚠️ -62.45
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.249	1.253	0
/error-in-render avg req/sec	2001.11	1994.72	⚠️ -6.39

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..42af.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-a9a6f0d..a96d.js gzip	6.59 kB	6.59 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	615 B	615 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	12.2s	12.4s	⚠️ +156ms
nodeModulesSize	80.6 MB	80.6 MB	-136 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..42af.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-a9a6f0d..a96d.js gzip	6.59 kB	6.59 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.17 MB	5.17 MB	✓

Commit: 60a0415

packages/next/client/image.tsx

ijjk · 2021-01-05T18:58:41Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	12.1s	12.1s	⚠️ +5ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +335 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.576	2.465	-0.11
/ avg req/sec	970.36	1014.09	+43.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.826	1.802	-0.02
/error-in-render avg req/sec	1368.94	1387.33	+18.39

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	14.4s	14.6s	⚠️ +119ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +335 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.17 MB	5.17 MB	✓

Commit: d126aad

packages/next/client/image.tsx

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

styfle

Great, thanks! 🎉

ijjk · 2021-01-05T19:46:28Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	9.1s	9.4s	⚠️ +273ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +542 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.855	1.854	0
/ avg req/sec	1347.88	1348.74	+0.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.259	1.271	⚠️ +0.01
/error-in-render avg req/sec	1985.59	1966.86	⚠️ -18.73

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	11.4s	11.3s	-67ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +542 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.17 MB	5.17 MB	✓

Commit: 4afaeb5

ijjk · 2021-01-05T20:40:50Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	12.7s	12.8s	⚠️ +74ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +542 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.492	2.636	⚠️ +0.14
/ avg req/sec	1003.12	948.57	⚠️ -54.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.932	1.89	-0.04
/error-in-render avg req/sec	1293.86	1322.43	+28.57

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
buildDuration	15s	14.6s	-306ms
nodeModulesSize	80.6 MB	80.6 MB	⚠️ +542 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
677f882d2ed8..396f.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d74fce9..a1a1.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.3 kB	59.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
polyfills-81..14d7.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_app-b6fc6bc..222c.js gzip	1.28 kB	1.28 kB	✓
_error-e2ffa..0f3f.js gzip	3.46 kB	3.46 kB	✓
hooks-010c20..8411.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-705099c..c35d.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-loader-prop	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.17 MB	5.17 MB	✓

Commit: 5c1563b

AlexandraKlein · 2021-01-06T01:22:50Z

Thank you! 🎉 When will this be released and added to the documentation?

Timer · 2021-01-06T01:24:07Z

It was just released on canary. It'll be in the docs on the next stable release, 10.0.5.

Docs for #20216.

atcastle added 11 commits November 18, 2020 12:18

support custom image component url resolvers

c78462b

Merge remote-tracking branch 'origin/canary' into image-component-cus…

86e51ed

…tom-resolvers

Fix inccorect conditional

d464057

Add tests for custom resolver errors

a68391b

Add support for resolver alternative to loader property

83d531f

Merge remote-tracking branch 'origin/canary' into image-component-cus…

6c3234a

…tom-resolvers

Rename registerCustomResolver to registerCustomImageLoader

f0e7dc0

Change to use loader prop instead of _app.js

4034c6e

Merge remote-tracking branch 'origin/canary' into image-component-loa…

8728227

…der-prop

Revert obsolete changes

b98d2d6

One more image-config reversion

e2ade38

atcastle requested review from ijjk, lfades, Timer and timneutkens as code owners December 15, 2020 23:24

ijjk added the type: next label Dec 15, 2020

vercel bot temporarily deployed to Preview December 15, 2020 23:24 Inactive

This was referenced Dec 15, 2020

Add image loader prop #20213

Closed

Image component custom resolvers #19325

Closed

styfle linked an issue Dec 15, 2020 that may be closed by this pull request

Custom Image Loaders #18606

Closed

styfle reviewed Dec 15, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Dec 15, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Dec 15, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

Update packages/next/client/image.tsx

750e0dc

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

vercel bot temporarily deployed to Preview December 15, 2020 23:46 Inactive

atcastle added 2 commits December 15, 2020 15:47

remove redundant 'default' setting

ed8de54

Merge branch 'image-component-loader-prop' of github.com:azukaru/next…

cce179e

….js into image-component-loader-prop

vercel bot temporarily deployed to Preview December 15, 2020 23:51 Inactive

ricokahler previously approved these changes Dec 16, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

packages/next/client/image.tsx Outdated Show resolved Hide resolved

packages/next/client/image.tsx Outdated Show resolved Hide resolved

packages/next/client/image.tsx Outdated Show resolved Hide resolved

atcastle added 5 commits January 3, 2021 16:09

Merge remote-tracking branch 'origin/canary' into image-component-loa…

f9cabd2

…der-prop

Remove support for string identification of built-in loaders

5301504

Clean up obsolete config destructuring change in image.tsx

7bce34c

Remove redundant check for invalid default loader

dc2b6ac

Export type definition for image loader props

60a0415

atcastle dismissed ricokahler’s stale review via 60a0415 January 4, 2021 00:43

styfle reviewed Jan 4, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

Fixed mistakenly removed loading prop validation for image component

d126aad

styfle reviewed Jan 5, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

atcastle and others added 2 commits January 5, 2021 11:30

Update packages/next/client/image.tsx

ebb20b8

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

Add default loaderr validation back into image.tsx

4afaeb5

styfle approved these changes Jan 5, 2021

View reviewed changes

leerob mentioned this pull request Jan 5, 2021

Add docs for custom image loaders. #20788

Merged

Timer approved these changes Jan 5, 2021

View reviewed changes

Merge branch 'canary' into image-component-loader-prop

5c1563b

kodiakhq bot merged commit c8bc17f into vercel:canary Jan 5, 2021

styfle mentioned this pull request Jan 5, 2021

Add Contentful image loader #19117

Closed

kodiakhq bot pushed a commit that referenced this pull request Jan 6, 2021

Add docs for custom image loaders. (#20788)

9afc0f5

Docs for #20216.

timneutkens mentioned this pull request Jan 6, 2021

Proposal: Allow custom parameters for image CDNs #18537

Closed

wedneyyuri mentioned this pull request Jan 6, 2021

Next js <Image> tag with url at build time Fails to load the image #20560

Closed

allanwhite mentioned this pull request Feb 12, 2021

Inline Images in RT fields not rendering allanwhite/contentful-se-blog#13

Open

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for custom image loaders via image component prop #20216

Support for custom image loaders via image component prop #20216

atcastle commented Dec 15, 2020 •

edited by Timer

ijjk commented Dec 15, 2020

ijjk commented Dec 15, 2020

ricokahler left a comment

abarnwell commented Dec 28, 2020

ijjk commented Jan 4, 2021

ijjk commented Jan 5, 2021

styfle left a comment

ijjk commented Jan 5, 2021

ijjk commented Jan 5, 2021

AlexandraKlein commented Jan 6, 2021

Timer commented Jan 6, 2021

Support for custom image loaders via image component prop #20216

Support for custom image loaders via image component prop #20216

Conversation

atcastle commented Dec 15, 2020 • edited by Timer

ijjk commented Dec 15, 2020

Stats from current PR

ijjk commented Dec 15, 2020

Stats from current PR

ricokahler left a comment

Choose a reason for hiding this comment

abarnwell commented Dec 28, 2020

ijjk commented Jan 4, 2021

Stats from current PR

ijjk commented Jan 5, 2021

Stats from current PR

styfle left a comment

Choose a reason for hiding this comment

ijjk commented Jan 5, 2021

Stats from current PR

ijjk commented Jan 5, 2021

Stats from current PR

AlexandraKlein commented Jan 6, 2021

Timer commented Jan 6, 2021

atcastle commented Dec 15, 2020 •

edited by Timer