Add new 'raw' image layout #34339
Merged
Add new 'raw' image layout #34339
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
atcastle
requested review from
timneutkens,
ijjk,
shuding,
styfle,
huozhi,
padmaia and
leerob
as code owners
atcastle
added
the
created-by: Chrome Aurora
This comment has been minimized.
This comment has been minimized.
atcastle
commented
Feb 14, 2022
atcastle
commented
Feb 14, 2022
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.
This comment has been minimized.
styfle
reviewed
Feb 15, 2022
styfle
reviewed
Feb 15, 2022
test/integration/image-component/typescript-style/pages/invalid.tsx
Outdated
Show resolved
Hide resolved
styfle
reviewed
Feb 15, 2022
kara
reviewed
Feb 16, 2022
…port for objectiFit and objecctPosition attributes
This comment has been minimized.
This comment has been minimized.
Co-authored-by: Steven <steven@ceriously.com>
styfle
reviewed
Mar 10, 2022
This comment has been minimized.
This comment has been minimized.
|
@atcastle It's not everyday you see a PR with 83 comments and 53 commits 😅 Thanks! |
styfle
reviewed
Mar 10, 2022
styfle
reviewed
Mar 10, 2022
Co-authored-by: Steven <steven@ceriously.com>
styfle
reviewed
Mar 10, 2022
styfle
reviewed
Mar 10, 2022
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Failing test suitesCommit: d48b36a
Expand output● Image rendering › should render noscript element when placeholder=blur Read more about building and testing Next.js in contributing.md. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
styfle
reviewed
Mar 14, 2022
styfle
reviewed
Mar 14, 2022
styfle
reviewed
Mar 14, 2022
styfle
reviewed
Mar 14, 2022
Stats from current PRDefault Build (Increase detected
|
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| buildDuration | 20s | 20.5s | |
| buildDurationCached | 8.1s | 7.7s | -353ms |
| nodeModulesSize | 378 MB | 378 MB |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 4.356 | 4.393 | |
| / avg req/sec | 573.93 | 569.12 | |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 2.195 | 2.272 | |
| /error-in-render avg req/sec | 1139.09 | 1100.59 |
Client Bundles (main, webpack) Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| 925.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42 kB | 42 kB | ✓ |
| main-HASH.js gzip | 27.9 kB | 28 kB | |
| webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
| Overall change | 71.6 kB | 71.6 kB |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.36 kB | 1.36 kB | ✓ |
| _error-HASH.js gzip | 192 B | 192 B | ✓ |
| amp-HASH.js gzip | 309 B | 309 B | ✓ |
| css-HASH.js gzip | 327 B | 327 B | ✓ |
| dynamic-HASH.js gzip | 2.57 kB | 2.57 kB | ✓ |
| head-HASH.js gzip | 351 B | 351 B | ✓ |
| hooks-HASH.js gzip | 920 B | 920 B | ✓ |
| image-HASH.js gzip | 5.09 kB | 5.48 kB | |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 2.26 kB | 2.26 kB | ✓ |
| routerDirect..HASH.js gzip | 320 B | 320 B | ✓ |
| script-HASH.js gzip | 387 B | 387 B | ✓ |
| withRouter-HASH.js gzip | 319 B | 319 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 14.8 kB | 15.2 kB |
Client Build Manifests
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 460 B | 460 B | ✓ |
| Overall change | 460 B | 460 B | ✓ |
Rendered Page Sizes Overall decrease ✓
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| index.html gzip | 531 B | 530 B | -1 B |
| link.html gzip | 545 B | 545 B | ✓ |
| withRouter.html gzip | 526 B | 525 B | -1 B |
| Overall change | 1.6 kB | 1.6 kB | -2 B |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-c58ed3c0b240dfa3.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-8642d114a09c62c5.js"],
- "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-6052261a372c369a.js"],
+ "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-8d15772e2d93d854.js"],
"/link": ["static\u002Fchunks\u002Fpages\u002Flink-0b3d72804dab6202.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-00527c3f2207a902.js"Diff for image-HASH.js
@@ -150,6 +150,7 @@
quality = _param.quality,
width = _param.width,
height = _param.height,
+ style = _param.style,
objectFit = _param.objectFit,
objectPosition = _param.objectPosition,
onLoadingComplete = _param.onLoadingComplete,
@@ -170,6 +171,7 @@
"quality",
"width",
"height",
+ "style",
"objectFit",
"objectPosition",
"onLoadingComplete",
@@ -177,7 +179,6 @@
"placeholder",
"blurDataURL"
]);
- var imgRef = (0, _react).useRef(null);
var configContext = (0, _react).useContext(
_imageConfigContext.ImageConfigContext
);
@@ -246,9 +247,6 @@
if (true && loadedImageURLs.has(src)) {
isLazy = false;
}
- if (false) {
- var url, urlStr, VALID_BLUR_EXT;
- }
var ref1 = _slicedToArray(
(0, _useIntersection).useIntersection({
rootRef: lazyRoot,
@@ -285,7 +283,7 @@
};
var hasSizer = false;
var sizerSvgUrl;
- var imgStyle = {
+ var layoutStyle = {
position: "absolute",
top: 0,
left: 0,
@@ -305,6 +303,20 @@
objectFit: objectFit,
objectPosition: objectPosition
};
+ if (false) {
+ }
+ if (false) {
+ var overwrittenStyles, url, urlStr, VALID_BLUR_EXT;
+ }
+ var imgStyle = Object.assign(
+ {},
+ style,
+ layout === "raw"
+ ? {
+ aspectRatio: "".concat(widthInt, " / ").concat(heightInt)
+ }
+ : layoutStyle
+ );
var blurStyle =
placeholder === "blur"
? {
@@ -392,6 +404,7 @@
_obj);
var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+ var imgRef = (0, _react).useRef(null);
(0, _react).useEffect(
function() {
onLoadingCompleteRef.current = onLoadingComplete;
@@ -416,77 +429,71 @@
},
[srcString, layout, placeholder, isVisible]
);
- return /*#__PURE__*/ _react.default.createElement(
- "span",
+ var imgElementArgs = _objectSpread(
{
- style: wrapperStyle
+ isLazy: isLazy,
+ imgAttributes: imgAttributes,
+ heightInt: heightInt,
+ widthInt: widthInt,
+ qualityInt: qualityInt,
+ layout: layout,
+ className: className,
+ imgStyle: imgStyle,
+ blurStyle: blurStyle,
+ imgRef: imgRef,
+ loading: loading,
+ config: config,
+ unoptimized: unoptimized,
+ placeholder: placeholder,
+ loader: loader,
+ srcString: srcString
},
- hasSizer
+ rest
+ );
+ return /*#__PURE__*/ _react.default.createElement(
+ _react.default.Fragment,
+ null,
+ layout === "raw"
? /*#__PURE__*/ _react.default.createElement(
+ ImageElement,
+ Object.assign({}, imgElementArgs)
+ )
+ : /*#__PURE__*/ _react.default.createElement(
"span",
{
- style: sizerStyle
+ style: wrapperStyle
},
- sizerSvgUrl
- ? /*#__PURE__*/ _react.default.createElement("img", {
- style: {
- display: "block",
- maxWidth: "100%",
- width: "initial",
- height: "initial",
- background: "none",
- opacity: 1,
- border: 0,
- margin: 0,
- padding: 0
+ hasSizer
+ ? /*#__PURE__*/ _react.default.createElement(
+ "span",
+ {
+ style: sizerStyle
},
- alt: "",
- "aria-hidden": true,
- src: sizerSvgUrl
- })
- : null
- )
- : null,
- /*#__PURE__*/ _react.default.createElement(
- "img",
- Object.assign({}, rest, imgAttributes, {
- decoding: "async",
- "data-nimg": layout,
- className: className,
- ref: imgRef,
- style: _objectSpread({}, imgStyle, blurStyle)
- })
- ),
- (isLazy || placeholder === "blur") &&
- /*#__PURE__*/ _react.default.createElement(
- "noscript",
- null,
- /*#__PURE__*/ _react.default.createElement(
- "img",
- Object.assign(
- {},
- rest,
- generateImgAttrs({
- config: config,
- src: src,
- unoptimized: unoptimized,
- layout: layout,
- width: widthInt,
- quality: qualityInt,
- sizes: sizes,
- loader: loader
- }),
- {
- decoding: "async",
- "data-nimg": layout,
- style: imgStyle,
- className: className,
- // @ts-ignore - TODO: upgrade to `@types/react@17`
- loading: loading || "lazy"
- }
+ sizerSvgUrl
+ ? /*#__PURE__*/ _react.default.createElement("img", {
+ style: {
+ display: "block",
+ maxWidth: "100%",
+ width: "initial",
+ height: "initial",
+ background: "none",
+ opacity: 1,
+ border: 0,
+ margin: 0,
+ padding: 0
+ },
+ alt: "",
+ "aria-hidden": true,
+ src: sizerSvgUrl
+ })
+ : null
+ )
+ : null,
+ /*#__PURE__*/ _react.default.createElement(
+ ImageElement,
+ Object.assign({}, imgElementArgs)
)
- )
- ),
+ ),
priority // for browsers that do not support `imagesrcset`, and in those cases
? // it would likely cause the incorrect image to be preloaded.
//
@@ -608,11 +615,23 @@
}
return target;
}
+ var ref;
+ var experimentalLayoutRaw =
+ (ref = {
+ deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+ imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+ path: "/_next/image",
+ loader: "default",
+ experimentalLayoutRaw: false
+ }) === null || ref === void 0
+ ? void 0
+ : ref.experimentalLayoutRaw;
var configEnv = {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "/_next/image",
- loader: "default"
+ loader: "default",
+ experimentalLayoutRaw: false
};
var loadedImageURLs = new Set();
var allImgs = new Map();
@@ -638,6 +657,7 @@
"fixed",
"intrinsic",
"responsive",
+ "raw",
undefined
];
function isStaticRequire(src) {
@@ -655,7 +675,10 @@
function getWidths(param, width, layout, sizes) {
var deviceSizes = param.deviceSizes,
allSizes = param.allSizes;
- if (sizes && (layout === "fill" || layout === "responsive")) {
+ if (
+ sizes &&
+ (layout === "fill" || layout === "responsive" || layout === "raw")
+ ) {
// Find all the "vw" percent sizes used in the sizes prop
var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
var percentSizes = [];
@@ -729,9 +752,9 @@
sizes: undefined
};
}
- var ref = getWidths(config, width, layout, sizes),
- widths = ref.widths,
- kind = ref.kind;
+ var ref2 = getWidths(config, width, layout, sizes),
+ widths = ref2.widths,
+ kind = ref2.kind;
var last = widths.length - 1;
return {
sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -775,11 +798,11 @@
return undefined;
}
function defaultImageLoader(loaderProps) {
- var ref;
+ var ref2;
var loaderKey =
- ((ref = loaderProps.config) === null || ref === void 0
+ ((ref2 = loaderProps.config) === null || ref2 === void 0
? void 0
- : ref.loader) || "default";
+ : ref2.loader) || "default";
var load = loaders.get(loaderKey);
if (load) {
return load(loaderProps);
@@ -828,7 +851,7 @@
});
}
if (false) {
- var parent, ref;
+ var parent, ref3;
}
});
}
@@ -844,6 +867,105 @@
}
}
}
+ var ImageElement = function(_param) {
+ var imgAttributes = _param.imgAttributes,
+ heightInt = _param.heightInt,
+ widthInt = _param.widthInt,
+ qualityInt = _param.qualityInt,
+ layout = _param.layout,
+ className = _param.className,
+ imgStyle = _param.imgStyle,
+ blurStyle = _param.blurStyle,
+ isLazy = _param.isLazy,
+ imgRef = _param.imgRef,
+ placeholder = _param.placeholder,
+ loading = _param.loading,
+ sizes = _param.sizes,
+ srcString = _param.srcString,
+ config = _param.config,
+ unoptimized = _param.unoptimized,
+ loader = _param.loader,
+ rest = _objectWithoutProperties(_param, [
+ "imgAttributes",
+ "heightInt",
+ "widthInt",
+ "qualityInt",
+ "layout",
+ "className",
+ "imgStyle",
+ "blurStyle",
+ "isLazy",
+ "imgRef",
+ "placeholder",
+ "loading",
+ "sizes",
+ "srcString",
+ "config",
+ "unoptimized",
+ "loader"
+ ]);
+ return /*#__PURE__*/ _react.default.createElement(
+ _react.default.Fragment,
+ null,
+ /*#__PURE__*/ _react.default.createElement(
+ "img",
+ Object.assign(
+ {},
+ rest,
+ imgAttributes,
+ layout === "raw" && !sizes
+ ? {
+ height: heightInt,
+ width: widthInt
+ }
+ : {},
+ {
+ decoding: "async",
+ "data-nimg": layout,
+ className: className,
+ ref: imgRef,
+ style: _objectSpread({}, imgStyle, blurStyle)
+ }
+ )
+ ),
+ (isLazy || placeholder === "blur") &&
+ /*#__PURE__*/ _react.default.createElement(
+ "noscript",
+ null,
+ /*#__PURE__*/ _react.default.createElement(
+ "img",
+ Object.assign(
+ {},
+ rest,
+ generateImgAttrs({
+ config: config,
+ src: srcString,
+ unoptimized: unoptimized,
+ layout: layout,
+ width: widthInt,
+ quality: qualityInt,
+ sizes: sizes,
+ loader: loader
+ }),
+ layout === "raw" && !sizes
+ ? {
+ height: heightInt,
+ width: widthInt
+ }
+ : {},
+ {
+ decoding: "async",
+ "data-nimg": layout,
+ style: imgStyle,
+ className: className,
+ // @ts-ignore - TODO: upgrade to `@types/react@17`
+ loading: loading || "lazy"
+ }
+ )
+ )
+ )
+ );
+ };
function normalizeSrc(src) {
return src[0] === "/" ? src.slice(1) : src;
}Diff for main-HASH.js
@@ -1273,7 +1273,8 @@
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "/_next/image",
- loader: "default"
+ loader: "default",
+ experimentalLayoutRaw: false
}
},
childrenDiff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<scriptDiff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<scriptDiff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<scriptDefault Build with SWC (Increase detected ⚠️ )
General Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| buildDuration | 25.6s | 24.8s | -804ms |
| buildDurationCached | 7.7s | 7.7s | |
| nodeModulesSize | 378 MB | 378 MB |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 4.391 | 4.384 | -0.01 |
| / avg req/sec | 569.33 | 570.3 | +0.97 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 2.132 | 2.263 | |
| /error-in-render avg req/sec | 1172.82 | 1104.7 |
Client Bundles (main, webpack) Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| 925.HASH.js gzip | 178 B | 178 B | ✓ |
| framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
| main-HASH.js gzip | 28.3 kB | 28.3 kB | |
| webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
| Overall change | 72.2 kB | 72.2 kB |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
| _error-HASH.js gzip | 179 B | 179 B | ✓ |
| amp-HASH.js gzip | 313 B | 313 B | ✓ |
| css-HASH.js gzip | 324 B | 324 B | ✓ |
| dynamic-HASH.js gzip | 2.56 kB | 2.56 kB | ✓ |
| head-HASH.js gzip | 351 B | 351 B | ✓ |
| hooks-HASH.js gzip | 921 B | 921 B | ✓ |
| image-HASH.js gzip | 5.23 kB | 5.59 kB | |
| index-HASH.js gzip | 261 B | 261 B | ✓ |
| link-HASH.js gzip | 2.33 kB | 2.33 kB | ✓ |
| routerDirect..HASH.js gzip | 322 B | 322 B | ✓ |
| script-HASH.js gzip | 388 B | 388 B | ✓ |
| withRouter-HASH.js gzip | 317 B | 317 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 15 kB | 15.3 kB |
Client Build Manifests Overall decrease ✓
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 458 B | 457 B | -1 B |
| Overall change | 458 B | 457 B | -1 B |
Rendered Page Sizes Overall increase ⚠️
| vercel/next.js canary | atcastle/next.js image-layout-raw | Change | |
|---|---|---|---|
| index.html gzip | 531 B | 531 B | ✓ |
| link.html gzip | 545 B | 546 B | |
| withRouter.html gzip | 527 B | 527 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-c58ed3c0b240dfa3.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-8642d114a09c62c5.js"],
- "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-6052261a372c369a.js"],
+ "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-8d15772e2d93d854.js"],
"/link": ["static\u002Fchunks\u002Fpages\u002Flink-0b3d72804dab6202.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-00527c3f2207a902.js"Diff for image-HASH.js
@@ -150,6 +150,7 @@
quality = _param.quality,
width = _param.width,
height = _param.height,
+ style = _param.style,
objectFit = _param.objectFit,
objectPosition = _param.objectPosition,
onLoadingComplete = _param.onLoadingComplete,
@@ -170,6 +171,7 @@
"quality",
"width",
"height",
+ "style",
"objectFit",
"objectPosition",
"onLoadingComplete",
@@ -177,7 +179,6 @@
"placeholder",
"blurDataURL"
]);
- var imgRef = (0, _react).useRef(null);
var configContext = (0, _react).useContext(
_imageConfigContext.ImageConfigContext
);
@@ -246,9 +247,6 @@
if (true && loadedImageURLs.has(src)) {
isLazy = false;
}
- if (false) {
- var url, urlStr, VALID_BLUR_EXT;
- }
var ref1 = _slicedToArray(
(0, _useIntersection).useIntersection({
rootRef: lazyRoot,
@@ -285,7 +283,7 @@
};
var hasSizer = false;
var sizerSvgUrl;
- var imgStyle = {
+ var layoutStyle = {
position: "absolute",
top: 0,
left: 0,
@@ -305,6 +303,20 @@
objectFit: objectFit,
objectPosition: objectPosition
};
+ if (false) {
+ }
+ if (false) {
+ var overwrittenStyles, url, urlStr, VALID_BLUR_EXT;
+ }
+ var imgStyle = Object.assign(
+ {},
+ style,
+ layout === "raw"
+ ? {
+ aspectRatio: "".concat(widthInt, " / ").concat(heightInt)
+ }
+ : layoutStyle
+ );
var blurStyle =
placeholder === "blur"
? {
@@ -392,6 +404,7 @@
_obj);
var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+ var imgRef = (0, _react).useRef(null);
(0, _react).useEffect(
function() {
onLoadingCompleteRef.current = onLoadingComplete;
@@ -416,77 +429,71 @@
},
[srcString, layout, placeholder, isVisible]
);
- return /*#__PURE__*/ _react.default.createElement(
- "span",
+ var imgElementArgs = _objectSpread(
{
- style: wrapperStyle
+ isLazy: isLazy,
+ imgAttributes: imgAttributes,
+ heightInt: heightInt,
+ widthInt: widthInt,
+ qualityInt: qualityInt,
+ layout: layout,
+ className: className,
+ imgStyle: imgStyle,
+ blurStyle: blurStyle,
+ imgRef: imgRef,
+ loading: loading,
+ config: config,
+ unoptimized: unoptimized,
+ placeholder: placeholder,
+ loader: loader,
+ srcString: srcString
},
- hasSizer
+ rest
+ );
+ return /*#__PURE__*/ _react.default.createElement(
+ _react.default.Fragment,
+ null,
+ layout === "raw"
? /*#__PURE__*/ _react.default.createElement(
+ ImageElement,
+ Object.assign({}, imgElementArgs)
+ )
+ : /*#__PURE__*/ _react.default.createElement(
"span",
{
- style: sizerStyle
+ style: wrapperStyle
},
- sizerSvgUrl
- ? /*#__PURE__*/ _react.default.createElement("img", {
- style: {
- display: "block",
- maxWidth: "100%",
- width: "initial",
- height: "initial",
- background: "none",
- opacity: 1,
- border: 0,
- margin: 0,
- padding: 0
+ hasSizer
+ ? /*#__PURE__*/ _react.default.createElement(
+ "span",
+ {
+ style: sizerStyle
},
- alt: "",
- "aria-hidden": true,
- src: sizerSvgUrl
- })
- : null
- )
- : null,
- /*#__PURE__*/ _react.default.createElement(
- "img",
- Object.assign({}, rest, imgAttributes, {
- decoding: "async",
- "data-nimg": layout,
- className: className,
- ref: imgRef,
- style: _objectSpread({}, imgStyle, blurStyle)
- })
- ),
- (isLazy || placeholder === "blur") &&
- /*#__PURE__*/ _react.default.createElement(
- "noscript",
- null,
- /*#__PURE__*/ _react.default.createElement(
- "img",
- Object.assign(
- {},
- rest,
- generateImgAttrs({
- config: config,
- src: src,
- unoptimized: unoptimized,
- layout: layout,
- width: widthInt,
- quality: qualityInt,
- sizes: sizes,
- loader: loader
- }),
- {
- decoding: "async",
- "data-nimg": layout,
- style: imgStyle,
- className: className,
- // @ts-ignore - TODO: upgrade to `@types/react@17`
- loading: loading || "lazy"
- }
+ sizerSvgUrl
+ ? /*#__PURE__*/ _react.default.createElement("img", {
+ style: {
+ display: "block",
+ maxWidth: "100%",
+ width: "initial",
+ height: "initial",
+ background: "none",
+ opacity: 1,
+ border: 0,
+ margin: 0,
+ padding: 0
+ },
+ alt: "",
+ "aria-hidden": true,
+ src: sizerSvgUrl
+ })
+ : null
+ )
+ : null,
+ /*#__PURE__*/ _react.default.createElement(
+ ImageElement,
+ Object.assign({}, imgElementArgs)
)
- )
- ),
+ ),
priority // for browsers that do not support `imagesrcset`, and in those cases
? // it would likely cause the incorrect image to be preloaded.
//
@@ -608,11 +615,23 @@
}
return target;
}
+ var ref;
+ var experimentalLayoutRaw =
+ (ref = {
+ deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+ imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+ path: "/_next/image",
+ loader: "default",
+ experimentalLayoutRaw: false
+ }) === null || ref === void 0
+ ? void 0
+ : ref.experimentalLayoutRaw;
var configEnv = {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "/_next/image",
- loader: "default"
+ loader: "default",
+ experimentalLayoutRaw: false
};
var loadedImageURLs = new Set();
var allImgs = new Map();
@@ -638,6 +657,7 @@
"fixed",
"intrinsic",
"responsive",
+ "raw",
undefined
];
function isStaticRequire(src) {
@@ -655,7 +675,10 @@
function getWidths(param, width, layout, sizes) {
var deviceSizes = param.deviceSizes,
allSizes = param.allSizes;
- if (sizes && (layout === "fill" || layout === "responsive")) {
+ if (
+ sizes &&
+ (layout === "fill" || layout === "responsive" || layout === "raw")
+ ) {
// Find all the "vw" percent sizes used in the sizes prop
var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
var percentSizes = [];
@@ -729,9 +752,9 @@
sizes: undefined
};
}
- var ref = getWidths(config, width, layout, sizes),
- widths = ref.widths,
- kind = ref.kind;
+ var ref2 = getWidths(config, width, layout, sizes),
+ widths = ref2.widths,
+ kind = ref2.kind;
var last = widths.length - 1;
return {
sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -775,11 +798,11 @@
return undefined;
}
function defaultImageLoader(loaderProps) {
- var ref;
+ var ref2;
var loaderKey =
- ((ref = loaderProps.config) === null || ref === void 0
+ ((ref2 = loaderProps.config) === null || ref2 === void 0
? void 0
- : ref.loader) || "default";
+ : ref2.loader) || "default";
var load = loaders.get(loaderKey);
if (load) {
return load(loaderProps);
@@ -828,7 +851,7 @@
});
}
if (false) {
- var parent, ref;
+ var parent, ref3;
}
});
}
@@ -844,6 +867,105 @@
}
}
}
+ var ImageElement = function(_param) {
+ var imgAttributes = _param.imgAttributes,
+ heightInt = _param.heightInt,
+ widthInt = _param.widthInt,
+ qualityInt = _param.qualityInt,
+ layout = _param.layout,
+ className = _param.className,
+ imgStyle = _param.imgStyle,
+ blurStyle = _param.blurStyle,
+ isLazy = _param.isLazy,
+ imgRef = _param.imgRef,
+ placeholder = _param.placeholder,
+ loading = _param.loading,
+ sizes = _param.sizes,
+ srcString = _param.srcString,
+ config = _param.config,
+ unoptimized = _param.unoptimized,
+ loader = _param.loader,
+ rest = _objectWithoutProperties(_param, [
+ "imgAttributes",
+ "heightInt",
+ "widthInt",
+ "qualityInt",
+ "layout",
+ "className",
+ "imgStyle",
+ "blurStyle",
+ "isLazy",
+ "imgRef",
+ "placeholder",
+ "loading",
+ "sizes",
+ "srcString",
+ "config",
+ "unoptimized",
+ "loader"
+ ]);
+ return /*#__PURE__*/ _react.default.createElement(
+ _react.default.Fragment,
+ null,
+ /*#__PURE__*/ _react.default.createElement(
+ "img",
+ Object.assign(
+ {},
+ rest,
+ imgAttributes,
+ layout === "raw" && !sizes
+ ? {
+ height: heightInt,
+ width: widthInt
+ }
+ : {},
+ {
+ decoding: "async",
+ "data-nimg": layout,
+ className: className,
+ ref: imgRef,
+ style: _objectSpread({}, imgStyle, blurStyle)
+ }
+ )
+ ),
+ (isLazy || placeholder === "blur") &&
+ /*#__PURE__*/ _react.default.createElement(
+ "noscript",
+ null,
+ /*#__PURE__*/ _react.default.createElement(
+ "img",
+ Object.assign(
+ {},
+ rest,
+ generateImgAttrs({
+ config: config,
+ src: srcString,
+ unoptimized: unoptimized,
+ layout: layout,
+ width: widthInt,
+ quality: qualityInt,
+ sizes: sizes,
+ loader: loader
+ }),
+ layout === "raw" && !sizes
+ ? {
+ height: heightInt,
+ width: widthInt
+ }
+ : {},
+ {
+ decoding: "async",
+ "data-nimg": layout,
+ style: imgStyle,
+ className: className,
+ // @ts-ignore - TODO: upgrade to `@types/react@17`
+ loading: loading || "lazy"
+ }
+ )
+ )
+ )
+ );
+ };
function normalizeSrc(src) {
return src[0] === "/" ? src.slice(1) : src;
}Diff for main-HASH.js
@@ -1273,7 +1273,8 @@
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "/_next/image",
- loader: "default"
+ loader: "default",
+ experimentalLayoutRaw: false
}
},
childrenDiff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<scriptDiff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<scriptDiff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-ba59be0a2e2e35e6.js"
+ src="/_next/static/chunks/main-9dfea70a2ed081c8.js"
defer=""
></script>
<script
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new layout mode for images called
raw, as discussed with the core team a while back. This mode has the following characteristics:spanaround theimgelementimgelementstyleparameter is allowed and is passed through to the underlyingimgelementThis also adds documentation changes to describe the new component.
There are a few tradeoffs and DX decisions that may warrant discussion/revision before merging. I'll add a few comments to highlight those issues.
next/imagelayout modes #18637