Modify image component examples app for static image (#25956)
Some fairly minor changes to the image-component example app. Switches all instances of images from `/public` over to use static images and adds a page with an example image with blurry placeholder enabled.
This commit is contained in:
parent
9f9a3eeb84
commit
e5d0a30a2e
6 changed files with 43 additions and 12 deletions
|
@ -2,6 +2,7 @@ import styles from '../styles.module.css'
|
|||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import ViewSource from '../components/view-source'
|
||||
import vercel from '../public/vercel.png'
|
||||
|
||||
const Code = (p) => <code className={styles.inlineCode} {...p} />
|
||||
|
||||
|
@ -62,6 +63,17 @@ const Index = () => (
|
|||
</li>
|
||||
</ul>
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="placeholder">Placeholder</h2>
|
||||
<p>
|
||||
Adding <Code>placeholder="blur"</Code> to an image enables a blurry
|
||||
placeholder effect while that image loads.
|
||||
</p>
|
||||
<p>
|
||||
<Link href="/background">
|
||||
<a>See an example of the blurry placeholder.</a>
|
||||
</Link>
|
||||
</p>
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="internal">Internal Image</h2>
|
||||
<p>
|
||||
The following is an example of a reference to an interal image from the{' '}
|
||||
|
@ -71,7 +83,7 @@ const Index = () => (
|
|||
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} />
|
||||
<Image alt="Vercel logo" src={vercel} width={1000} height={1000} />
|
||||
<hr className={styles.hr} />
|
||||
<h2 id="external">External Image</h2>
|
||||
<p>
|
||||
|
|
|
@ -1,22 +1,18 @@
|
|||
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.js" />
|
||||
<h1>Image Component With Layout Fill</h1>
|
||||
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
<Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
|
||||
</div>
|
||||
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
src={mountains}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
/>
|
||||
|
@ -24,7 +20,7 @@ const Fill = () => (
|
|||
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
src={mountains}
|
||||
layout="fill"
|
||||
objectFit="none"
|
||||
quality={100}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import Image from 'next/image'
|
||||
import ViewSource from '../components/view-source'
|
||||
import mountains from '../public/mountains.jpg'
|
||||
|
||||
const Fixed = () => (
|
||||
<div>
|
||||
|
@ -7,7 +8,7 @@ const Fixed = () => (
|
|||
<h1>Image Component With Layout Fixed</h1>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
src={mountains}
|
||||
layout="fixed"
|
||||
width={700}
|
||||
height={475}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import Image from 'next/image'
|
||||
import ViewSource from '../components/view-source'
|
||||
import mountains from '../public/mountains.jpg'
|
||||
|
||||
const Intrinsic = () => (
|
||||
<div>
|
||||
|
@ -7,7 +8,7 @@ const Intrinsic = () => (
|
|||
<h1>Image Component With Layout Intrinsic</h1>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
src={mountains}
|
||||
layout="intrinsic"
|
||||
width={700}
|
||||
height={475}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import Image from 'next/image'
|
||||
import ViewSource from '../components/view-source'
|
||||
import mountains from '../public/mountains.jpg'
|
||||
|
||||
const Responsive = () => (
|
||||
<div>
|
||||
|
@ -7,7 +8,7 @@ const Responsive = () => (
|
|||
<h1>Image Component With Layout Responsive</h1>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src="/mountains.jpg"
|
||||
src={mountains}
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
|
|
20
examples/image-component/pages/placeholder.js
Normal file
20
examples/image-component/pages/placeholder.js
Normal file
|
@ -0,0 +1,20 @@
|
|||
import Image from 'next/image'
|
||||
import ViewSource from '../components/view-source'
|
||||
import mountains from '../public/mountains.jpg'
|
||||
|
||||
const Responsive = () => (
|
||||
<div>
|
||||
<ViewSource pathname="pages/layout-responsive.js" />
|
||||
<h1>Image Component With Layout Responsive</h1>
|
||||
<Image
|
||||
alt="Mountains"
|
||||
src={mountains}
|
||||
layout="responsive"
|
||||
placeholder="blur"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Responsive
|
Loading…
Reference in a new issue