Enhance sizes documentation for next/image #39301
Conversation
atcastle
requested review from
timneutkens,
ijjk,
shuding and
styfle
as code owners
ijjk
added
area: documentation
created-by: Chrome Aurora
docs/api-reference/next/image.md
Outdated
|
|
||
| const MyImage = (props) => { | ||
| return ( | ||
| <Image |
There was a problem hiding this comment.
Since you're using layout="fill", should there be a parent div with position: relative? Perhaps we should use layout="responsive" instead?
There was a problem hiding this comment.
I took out some of the example code and added a // ... because I think it would take too many lines to make the example illustrate a realistic 3 column layout. The important part is the <Image> element, anyway.
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Steven <steven@ceriously.com>
| import Image from 'next/future/image' | ||
| // ... | ||
|
|
||
| ;<Image |
There was a problem hiding this comment.
Let's wrap this in a component so it's easily copy/pastable? Will also fix the ; issue
There was a problem hiding this comment.
I added a <div className="grid-element"> wrapper, to give some context as to how to interpret this code snippet. To actually use the code you would need an additional grid container, and some flexbox styling, etc, which I'm afraid would make the snippet sort of unwieldy and take focus away from the sizes example value. Let me know if you think this new version works
|
|
||
| ```js | ||
| import Image from 'next/image' | ||
| ;<div className="grid-element"> |
There was a problem hiding this comment.
Should we revert or fix this forward? The semicolon and broken formatting will go live (we're currently pointing docs at canary, maybe we need to flip that back).
This PR updates the documentation for the
sizesproper in next/image to make it more clear what this prop does and why it's (very) important to use it. After feedback, I'll update this PR to also modify the future image component docs.