-
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
Merged
Merged
Add new 'raw' image layout #34339
Changes from 4 commits
Commits
Show all changes
62 commits
Select commit
Hold shift + click to select a range
889a3c8
Update framework chunk test regex to not select nested dependencies
atcastle ebafcca
Update webpack-config.ts
Timer 7ab3c8a
Merge branch 'canary' into canary
Timer 2c62327
Add support for raw layout mode
atcastle 4c769d3
Update image documentation for raw layout
atcastle 5843826
documentation autoformatting
atcastle 4252ffb
change typescript text fixture
atcastle c4fa96b
Merge remote-tracking branch 'origin' into image-layout-raw
atcastle 4006b36
Refactor base image element in image component. Remove raw layout sup…
atcastle efad4b8
lint fixes
atcastle 26a6103
lint fixes
atcastle f32440d
Fix typescript test
atcastle 78904f2
fix tests
atcastle c457914
lint fix
atcastle bdd8836
Merge remote-tracking branch 'origin' into image-layout-raw
atcastle e812837
Allow all layouts to use style prop
atcastle 90c778d
Move ImageElement component outside of Image
atcastle 34411f2
Fix handling of noscript image attributes
atcastle 64a0b70
lint fix
atcastle 435091e
Merge remote-tracking branch 'origin' into image-layout-raw
atcastle 2be4e4e
Merge remote-tracking branch 'origin' into image-layout-raw
atcastle 6c9a9e4
Update docs to show style is now allowed on image componenet
atcastle d9f51f1
Additional test coverage for image style prop and raw
atcastle ebf5812
auto-lint
atcastle 80ffd7e
Add support for priority to raw image and test it
atcastle b4fdc15
image.md wording tweak
atcastle 24cf3dc
Test coverage for srcset behavior in raw layout
atcastle 8c12019
Remove test focus
atcastle 74ac553
Update docs/api-reference/next/image.md
atcastle 8904782
Remove raw from ImageProps type and delete typescript-style test suite
atcastle 2f91512
auto-lint
atcastle cac28f0
Documentation updates and move sizes overwrite warning
atcastle 3be7243
auto-lint
atcastle 9c5b9b8
Update packages/next/client/image.tsx
atcastle adb3a57
Update docs/api-reference/next/image.md
atcastle dd21513
Merge branch 'image-layout-raw' of github.com:atcastle/next.js into i…
atcastle 6baa8be
auto-lint
atcastle 19ffddc
Merge remote-tracking branch 'upstream/canary' into image-layout-raw
atcastle e03c65b
Add experimental flag for raw layout mode
atcastle 20955eb
Fix image style test
atcastle b64bda7
Add aspect-ratio for raw images and only add height/width without sizes
atcastle 78b9434
Update packages/next/client/image.tsx
atcastle 7338c3a
Update docs/api-reference/next/image.md
atcastle bc42437
update docs for experimental raw layout
atcastle 5eea550
Fix markdown links
atcastle d3d82b6
Documentation wording change
atcastle 57edfe0
Merge branch 'canary' of github.com:atcastle/next.js into canary
atcastle d4e19f2
Merge branch 'canary' into image-layout-raw
atcastle a3aae1b
Merge branch 'canary' into image-layout-raw
atcastle 2e6e84d
Merge branch 'image-layout-raw' of github.com:atcastle/next.js into i…
atcastle 7525553
Fix type from merge
atcastle 9f41f20
Update packages/next/client/image.tsx
atcastle c4654fa
Update docs/api-reference/next/image.md
atcastle 820b152
Update packages/next/client/image.tsx
atcastle 8563475
change to isLazy image element prop
atcastle 74076ff
Merge branch 'image-layout-raw' of github.com:atcastle/next.js into i…
atcastle a000df1
clean up image element props
atcastle d48b36a
Use optional chaining for experimeental image opts
atcastle 531b623
Add placeholder to imgElementArgs
atcastle d22691d
Only throw experimentalRaw error in non-prod
atcastle b5b1375
Apply suggestions from code review
styfle 6a5ffac
Merge branch 'canary' into image-layout-raw
styfle File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
48 changes: 48 additions & 0 deletions
48
test/integration/image-component/default/pages/layout-raw.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import React from 'react' | ||
import Image from 'next/image' | ||
|
||
const Page = () => { | ||
return ( | ||
<div> | ||
<p>Layout Raw</p> | ||
<div id="image-container1"> | ||
<Image | ||
id="raw1" | ||
src="/wide.png" | ||
width="1200" | ||
height="700" | ||
layout="raw" | ||
objectFit="cover" | ||
loading="eager" | ||
></Image> | ||
</div> | ||
<div id="image-container2"> | ||
<Image | ||
id="raw2" | ||
src="/wide.png" | ||
width="1200" | ||
height="700" | ||
objectFit="cover" | ||
objectPosition="50% 50%" | ||
style={{ | ||
paddingLeft: '4rem', | ||
width: '100%', | ||
objectPosition: '30% 30%', | ||
}} | ||
layout="raw" | ||
></Image> | ||
</div> | ||
<div id="image-container3"> | ||
<Image | ||
id="raw3" | ||
src="/test.png" | ||
width="400" | ||
height="400" | ||
layout="raw" | ||
></Image> | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
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
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
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
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.
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.
Insert the image element with no responsive behavior
is misleading here. Point in case, the very next column describe how it auto-adjust its source according to responsive space available.I think it would be better to say
Insert the image element without any wrappers
orwithout NextJs layouts applied
.The "responsive" aspect you're referring to is more about NextJs layouts than what people are expecting "responsive" to mean in an image context. That's why I would leave that out of the description so nobody confuses
NextJs responsive layouts
withresponsive images
, which are 2 totally different things.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.
I changed this to "no automatic responsive behavior" which I think is accurate without implying that it cannot be made responsive. This column of the chart is describing behavior, rather than implementation, so I wouldn't be inclined to mention wrappers (or the lack thereof) at this point. Wrappers and styling are mentioned in the
raw
mode description just below this chart.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.
I still think it's a bit confusing.
Even with
raw
layout, I will still have ansrcset
and the browser will still choose the right version to download from that information. To me, I feel this is anautomatic responsive behavior
from the browser.It might just be me, but I wouldn't underestimate what
responsive
can mean in different context.With that said, I would tend to go more with something that mention NextJs layouts. Maybe something like
Insert the image element with no automatic layout