` elements but should be specified otherwise.
@@ -205,7 +193,7 @@ This is the default for `
` elements but should be specified otherwise.
### Styling Examples
-For examples of the Image component used with the various fill modes, see the [Image component example app](https://image-component.nextjs.gallery/).
+For examples of the Image component used with the various styles, see the [Image component example app](https://image-component.nextjs.gallery).
## Configuration
diff --git a/docs/manifest.json b/docs/manifest.json
index ee3e0c2f73..2b09a895d9 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -427,8 +427,14 @@
}
},
{
- "title": "next/future/image",
- "path": "/docs/api-reference/next/future/image.md"
+ "path": "/docs/api-reference/next/future/image",
+ "redirect": {
+ "destination": "/docs/api-reference/next/image"
+ }
+ },
+ {
+ "title": "next/legacy/image",
+ "path": "/docs/api-reference/next/legacy/image.md"
},
{
"title": "Edge Runtime",
diff --git a/examples/image-component/next.config.js b/examples/image-component/next.config.js
index ef4ded5dd2..44ce97cfd6 100644
--- a/examples/image-component/next.config.js
+++ b/examples/image-component/next.config.js
@@ -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/**',
+ },
+ ],
},
}
diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index e800958c58..c72c985a4b 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -6,7 +6,7 @@
"start": "next start"
},
"dependencies": {
- "next": "latest",
+ "next": "canary",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/image-component/pages/background.tsx b/examples/image-component/pages/background.tsx
index d3c0d8dc12..3b2d8cece7 100644
--- a/examples/image-component/pages/background.tsx
+++ b/examples/image-component/pages/background.tsx
@@ -1,6 +1,7 @@
import Image from 'next/image'
import ViewSource from '../components/view-source'
import styles from '../styles.module.css'
+import mountains from '../public/mountains.jpg'
const BackgroundPage = () => (
@@ -8,10 +9,14 @@ const BackgroundPage = () => (
diff --git a/examples/image-component/pages/color.tsx b/examples/image-component/pages/color.tsx
index b047970280..edb452b937 100644
--- a/examples/image-component/pages/color.tsx
+++ b/examples/image-component/pages/color.tsx
@@ -27,6 +27,10 @@ const Color = () => (
blurDataURL={rgbDataURL(237, 181, 6)}
width={750}
height={1000}
+ style={{
+ maxWidth: '100%',
+ height: 'auto',
+ }}
/>
(
blurDataURL={rgbDataURL(2, 129, 210)}
width={750}
height={1000}
+ style={{
+ maxWidth: '100%',
+ height: 'auto',
+ }}
/>
)
diff --git a/examples/image-component/pages/fill.tsx b/examples/image-component/pages/fill.tsx
new file mode 100644
index 0000000000..00f69b87d6
--- /dev/null
+++ b/examples/image-component/pages/fill.tsx
@@ -0,0 +1,46 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
+
+const Fill = () => (
+
+
+
Image Component With Layout Fill
+
+
+
+
+
+
+
+
+
+
+)
+
+export default Fill
diff --git a/examples/image-component/pages/index.tsx b/examples/image-component/pages/index.tsx
index 012011cf1e..267b0fa26f 100644
--- a/examples/image-component/pages/index.tsx
+++ b/examples/image-component/pages/index.tsx
@@ -29,70 +29,40 @@ const Index = () => (
images on-demand as the browser requests them.
-
Layout
+
Examples
- The layout
property tells the image to respond differently
- depending on the device size or the container size.
-
-
- Select a layout below and try resizing the window or rotating your
- device to see how the image reacts.
+ Try it the examples below (you may need to disable cache in dev tools to
+ see the effect if you already visited):
-
-
Placeholder
-
- The placeholder
property tells the image what to do while
- loading.
-
-
- You can optionally enable a blur-up placeholder while the high
- resolution image loads.
-
-
- Try it out below (you may need to disable cache in dev tools to see the
- effect if you already visited):
-
-
@@ -106,7 +76,16 @@ const Index = () => (
This image is intentionally large so you have to scroll down to the next
image.
-
+
External Image
@@ -114,14 +93,18 @@ const Index = () => (
assets.vercel.com
.
- External domains must be configured in next.config.js
using
- the domains
property.
+ External images must be configured in next.config.js
using
+ the remotePatterns
property.
Learn More
diff --git a/examples/image-component/pages/placeholder.tsx b/examples/image-component/pages/placeholder.tsx
index 9d5d9c0fa3..786f07490f 100644
--- a/examples/image-component/pages/placeholder.tsx
+++ b/examples/image-component/pages/placeholder.tsx
@@ -12,6 +12,10 @@ const PlaceholderBlur = () => (
placeholder="blur"
width={700}
height={475}
+ style={{
+ maxWidth: '100%',
+ height: 'auto',
+ }}
/>
)
diff --git a/examples/image-component/pages/responsive.tsx b/examples/image-component/pages/responsive.tsx
new file mode 100644
index 0000000000..2ab15ff84e
--- /dev/null
+++ b/examples/image-component/pages/responsive.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
+
+const Responsive = () => (
+
+)
+
+export default Responsive
diff --git a/examples/image-component/pages/shimmer.tsx b/examples/image-component/pages/shimmer.tsx
index b53990982c..5afaf6e953 100644
--- a/examples/image-component/pages/shimmer.tsx
+++ b/examples/image-component/pages/shimmer.tsx
@@ -31,6 +31,10 @@ const Shimmer = () => (
blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={700}
height={475}
+ style={{
+ maxWidth: '100%',
+ height: 'auto',
+ }}
/>