Revise image example with layouts near the top (#19161)
This page is useful for testing out layouts so we moved that section to the top.
This commit is contained in:
Steven
GitHub
parent
84716ae60d
commit
17a53e2765
2 changed files with 51 additions and 42 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
This example shows how to use the [Image Component in Next.js](https://nextjs.org/docs/api-reference/next/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. Run or deploy the app to see how it works!
|
||||
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!
|
||||
|
||||
## Deploy your own
|
||||
|
||||
|
|
|
|||
|
|
@ -11,52 +11,28 @@ const Index = () => (
|
|||
<div className={styles.card}>
|
||||
<h1>Image Component with Next.js</h1>
|
||||
<p>
|
||||
The images below use the{' '}
|
||||
This page demonstrates the usage of the{' '}
|
||||
<a href="https://nextjs.org/docs/api-reference/next/image">
|
||||
next/image
|
||||
</a>{' '}
|
||||
component to ensure optimal format and size for this browser.
|
||||
component with live examples.
|
||||
</p>
|
||||
<p>
|
||||
Images are also lazy loaded by default which means they don't load until
|
||||
scrolled into view.
|
||||
This component is designed to{' '}
|
||||
<a href="https://nextjs.org/docs/basic-features/image-optimization">
|
||||
automatically optimizate
|
||||
</a>{' '}
|
||||
images on-demand as the browser requests them.
|
||||
</p>
|
||||
<p>Try scolling down to try it out!</p>
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="layout">Layout</h2>
|
||||
<p>
|
||||
The following is an example of a reference to an interal image from the{' '}
|
||||
<Code>public</Code> directory.
|
||||
The <Code>layout</Code> property tells the image to respond differently
|
||||
depending on the device size or the container size.
|
||||
</p>
|
||||
<p>
|
||||
Notice that the image is responsive. As you adjust your browser width, a
|
||||
different sized image is loaded.
|
||||
</p>
|
||||
<Image alt="Vercel logo" src="/vercel.png" width={1000} height={1000} />
|
||||
<hr className={styles.hr} />
|
||||
<p>
|
||||
The following is an example of a reference to an external image at{' '}
|
||||
<Code>assets.vercel.com</Code>.
|
||||
</p>
|
||||
<p>
|
||||
External domains must be configured in <Code>next.config.js</Code> using
|
||||
the <Code>domains</Code> property.
|
||||
</p>
|
||||
<Image
|
||||
alt="Next.js logo"
|
||||
src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png"
|
||||
width={1200}
|
||||
height={400}
|
||||
/>
|
||||
<hr className={styles.hr} />
|
||||
<h2>Layouts</h2>
|
||||
<p>
|
||||
The following pages demonstrate possible <Code>layout</Code> property
|
||||
values.
|
||||
</p>
|
||||
<p>
|
||||
Click on one to try it out with your current device and be sure to
|
||||
change the window size or rotate your device to see how the image
|
||||
reacts.
|
||||
Select a layout below and try resizing the window or rotating your
|
||||
device to see how the image reacts.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -86,11 +62,44 @@ const Index = () => (
|
|||
</li>
|
||||
</ul>
|
||||
<hr className={styles.hr} />
|
||||
Checkout the documentation for{' '}
|
||||
<a href="https://nextjs.org/docs/basic-features/image-optimization">
|
||||
Image Optimization
|
||||
</a>{' '}
|
||||
to learn more.
|
||||
<h2 id="internal">Internal Image</h2>
|
||||
<p>
|
||||
The following is an example of a reference to an interal image from the{' '}
|
||||
<Code>public</Code> directory.
|
||||
</p>
|
||||
<p>
|
||||
This image is intentionally large so you have to scroll down to the next
|
||||
image.
|
||||
</p>
|
||||
<Image alt="Vercel logo" src="/vercel.png" width={1000} height={1000} />
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="external">External Image</h2>
|
||||
<p>
|
||||
The following is an example of a reference to an external image at{' '}
|
||||
<Code>assets.vercel.com</Code>.
|
||||
</p>
|
||||
<p>
|
||||
External domains must be configured in <Code>next.config.js</Code> using
|
||||
the <Code>domains</Code> property.
|
||||
</p>
|
||||
<Image
|
||||
alt="Next.js logo"
|
||||
src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png"
|
||||
width={1200}
|
||||
height={400}
|
||||
/>
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="more">Learn More</h2>
|
||||
<p>
|
||||
You can optionally configure a cloud provider, device sizes, and more!
|
||||
</p>
|
||||
<p>
|
||||
Checkout the{' '}
|
||||
<a href="https://nextjs.org/docs/basic-features/image-optimization">
|
||||
Image Optimization documentation
|
||||
</a>{' '}
|
||||
to learn more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue