From 17773a1cf3b087f0c4dee75b07b9f9c5fa70c4ce Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 18 Oct 2022 19:09:43 -0400 Subject: [PATCH] Fix links to `next/legacy/image` demo (#41539) This PR fixes links to `next/legacy/image` (demo, deploy, etc) --- docs/api-reference/next/legacy/image.md | 22 +++++++++++----------- docs/basic-features/image-optimization.md | 2 +- examples/image-component/README.md | 2 +- examples/image-legacy-component/README.md | 14 +++++++------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/api-reference/next/legacy/image.md b/docs/api-reference/next/legacy/image.md index c8493622ec8a..4f9919160d2b 100644 --- a/docs/api-reference/next/legacy/image.md +++ b/docs/api-reference/next/legacy/image.md @@ -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. diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index 6264cb647226..d68189b83007 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -193,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 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 diff --git a/examples/image-component/README.md b/examples/image-component/README.md index d56babeeaaa8..f56fc5671d6b 100644 --- a/examples/image-component/README.md +++ b/examples/image-component/README.md @@ -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 diff --git a/examples/image-legacy-component/README.md b/examples/image-legacy-component/README.md index 4aea7c6be0f9..84d5c3561cb0 100644 --- a/examples/image-legacy-component/README.md +++ b/examples/image-legacy-component/README.md @@ -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)).