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
Update next/image
docs and examples
#41434
Changes from 15 commits
f0e6cbb
6d705e0
b392856
54ecef5
2a7b7ec
ca38522
552413b
04b1aa8
3f58f67
a1f6b5b
db01250
571f459
63cf8d8
70838f6
e2268f9
e526cb0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -64,7 +64,97 @@ Dangerously migrates from `next/legacy/image` to the new `next/image` by adding | |
- Removes `objectPosition` prop and adds `style` | ||
- Removes `lazyBoundary` prop | ||
- Removes `lazyRoot` prop | ||
- TODO: handle `loader` | ||
- TODO: does not migrate the `loader` config. If you need it, you must manually add a `loader` prop. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Note this TODO was merged There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yep, this is not implemented yet There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
#### Before: intrinsic | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} /> | ||
} | ||
``` | ||
|
||
#### After: intrinsic | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
const css = { maxWidth: '100%', height: 'auto' } | ||
function Page() { | ||
return <Image src={img} style={css} /> | ||
} | ||
``` | ||
|
||
#### Before: responsive | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} layout="responsive" /> | ||
} | ||
``` | ||
|
||
#### After: responsive | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
const css = { width: '100%', height: 'auto' } | ||
function Page() { | ||
return <Image src={img} sizes="100vw" style={css} /> | ||
} | ||
``` | ||
|
||
#### Before: fill | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} layout="fill" /> | ||
} | ||
``` | ||
|
||
#### After: fill | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} sizes="100vw" fill /> | ||
} | ||
``` | ||
|
||
#### Before: fixed | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} layout="fixed" /> | ||
} | ||
``` | ||
|
||
#### After: fixed | ||
|
||
```jsx | ||
import Image from 'next/image' | ||
import img from '../img.png' | ||
|
||
function Page() { | ||
return <Image src={img} /> | ||
} | ||
``` | ||
|
||
## Next.js 11 | ||
|
||
|
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,14 @@ | ||
/** @type {import('next').NextConfig} */ | ||
module.exports = { | ||
images: { | ||
domains: ['assets.vercel.com'], | ||
formats: ['image/avif', 'image/webp'], | ||
remotePatterns: [ | ||
{ | ||
protocol: 'https', | ||
hostname: 'assets.vercel.com', | ||
port: '', | ||
pathname: '/image/upload/**', | ||
}, | ||
], | ||
}, | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import Image from 'next/image' | ||
import ViewSource from '../components/view-source' | ||
import mountains from '../public/mountains.jpg' | ||
|
||
const Fill = () => ( | ||
<div> | ||
<ViewSource pathname="pages/layout-fill.tsx" /> | ||
<h1>Image Component With Layout Fill</h1> | ||
<div style={{ position: 'relative', width: '300px', height: '500px' }}> | ||
<Image | ||
alt="Mountains" | ||
src={mountains} | ||
fill | ||
sizes="100vw" | ||
style={{ | ||
objectFit: 'cover', | ||
}} | ||
/> | ||
</div> | ||
<div style={{ position: 'relative', width: '300px', height: '500px' }}> | ||
<Image | ||
alt="Mountains" | ||
src={mountains} | ||
fill | ||
sizes="100vw" | ||
style={{ | ||
objectFit: 'contain', | ||
}} | ||
/> | ||
</div> | ||
<div style={{ position: 'relative', width: '300px', height: '500px' }}> | ||
<Image | ||
alt="Mountains" | ||
src={mountains} | ||
quality={100} | ||
fill | ||
sizes="100vw" | ||
style={{ | ||
objectFit: 'none', | ||
}} | ||
/> | ||
</div> | ||
</div> | ||
) | ||
|
||
export default Fill |
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.
This section still says (experimental) - should we update that and link in upgrade guide?
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.
@leerob This codemod is experimental and will remain that way forever. Because static analysis can't capture every dynamic usage of the component so users should be aware that its experimental. (similar to the existing
cra-to-next
codemod)