vercel · ijjk · Oct 18, 2022 · Oct 18, 2022 · Oct 18, 2022
@@ -89,18 +89,18 @@ The layout behavior of the image as the viewport changes size.
 | `responsive`          | Scale to fit width of container                          | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
 | `fill`                | Grow in both X and Y axes to fill container              | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
 
-- [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic)
+- [Demo the `intrinsic` layout (default)](https://image-legacy-component.nextjs.gallery/layout-intrinsic)
   - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
-- [Demo the `fixed` layout](https://image-component.nextjs.gallery/layout-fixed)
+- [Demo the `fixed` layout](https://image-legacy-component.nextjs.gallery/layout-fixed)
   - When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
-- [Demo the `responsive` layout](https://image-component.nextjs.gallery/layout-responsive)
+- [Demo the `responsive` layout](https://image-legacy-component.nextjs.gallery/layout-responsive)
   - When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
   - Ensure the parent element uses `display: block` in their stylesheet.
-- [Demo the `fill` layout](https://image-component.nextjs.gallery/layout-fill)
+- [Demo the `fill` layout](https://image-legacy-component.nextjs.gallery/layout-fill)
   - When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
   - This is usually paired with the [`objectFit`](#objectFit) property.
   - Ensure the parent element has `position: relative` in their stylesheet.
-- [Demo background image](https://image-component.nextjs.gallery/background)
+- [Demo background image](https://image-legacy-component.nextjs.gallery/background)
 
 ### loader
 
@@ -193,9 +193,9 @@ When `empty`, there will be no placeholder while the image is loading, only empt
 
 Try it out:
 
-- [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
-- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
-- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
+- [Demo the `blur` placeholder](https://image-legacy-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/color)
 
 ## Advanced Props
 
@@ -258,9 +258,9 @@ less) is recommended. Including larger images as placeholders may harm your appl
 
 Try it out:
 
-- [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
-- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
-- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
+- [Demo the default `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/shimmer)
+- [Demo the color effect with `blurDataURL` prop](https://image-legacy-component.nextjs.gallery/color)
 
 You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
 

@@ -193,7 +193,7 @@ This is the default for `<div>` elements but should be specified otherwise.
 
 ### Styling Examples
 
-For examples of the Image component used with the various styles, 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 Demo](https://image-component.nextjs.gallery).
 
 ## Configuration
 

@@ -6,7 +6,7 @@ The index page ([`pages/index.js`](pages/index.js)) has a couple images, one int
 
 ## Live demo
 
-[https://image-component.nextjs.gallery/](https://image-component.nextjs.gallery/)
+[https://image-component.nextjs.gallery](https://image-component.nextjs.gallery)
 
 ## Deploy your own
 

@@ -1,29 +1,29 @@
-# Image Component Example
+# Legacy Image Component Example
 
-This example shows how to use the [Image Component in Next.js](https://nextjs.org/docs/api-reference/next/image) serve optimized, responsive images.
+This example shows how to use the [Legacy Image Component in Next.js](https://nextjs.org/docs/api-reference/next/legacy/image) serve optimized, responsive images.
 
 The index page ([`pages/index.js`](pages/index.js)) has a couple images, one internal image and one external image. In [`next.config.js`](next.config.js), the `domains` property is used to enable external images. The other pages demonstrate the different layouts. Run or deploy the app to see how it works!
 
 ## Live demo
 
-[https://image-component.nextjs.gallery/](https://image-component.nextjs.gallery/)
+[https://image-legacy-component.nextjs.gallery](https://image-legacy-component.nextjs.gallery)
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/image-legacy-component)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/image-component&project-name=image-component&repository-name=image-legacy-component)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component&project-name=image-legacy-component&repository-name=image-legacy-component)
 
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example image-component image-app
+npx create-next-app --example image-legacy-component image-app
 # or
-yarn create next-app --example image-component image-app
+yarn create next-app --example image-legacy-component image-app
 # or
-pnpm create next-app --example image-component image-app
+pnpm create next-app --example image-legacy-component image-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).