-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add new 'raw' image layout #34339
Add new 'raw' image layout #34339
Conversation
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.
This comment has been minimized.
This comment has been minimized.
test/integration/image-component/typescript-style/pages/invalid.tsx
Outdated
Show resolved
Hide resolved
…port for objectiFit and objecctPosition attributes
This comment has been minimized.
This comment has been minimized.
Co-authored-by: Steven <steven@ceriously.com>
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! |
Co-authored-by: Steven <steven@ceriously.com>
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
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
}
},
children
Diff 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>
<script
Diff 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>
<script
Diff 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
Default 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
}
},
children
Diff 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>
<script
Diff 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>
<script
Diff 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
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:span
around theimg
elementimg
elementstyle
parameter is allowed and is passed through to the underlyingimg
elementThis 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/image
layout modes #18637