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.
vercel · Jun 9, 2021 · e5d0a30 · e5d0a30
1 parent 9f9a3ee
commit e5d0a30
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 12 deletions.
diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.js
@@ -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>

diff --git a/examples/image-component/pages/layout-fill.js b/examples/image-component/pages/layout-fill.js
@@ -1,30 +1,26 @@
 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"
       />
     </div>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image
         alt="Mountains"
-        src="/mountains.jpg"
+        src={mountains}
         layout="fill"
         objectFit="none"
         quality={100}

diff --git a/examples/image-component/pages/layout-fixed.js b/examples/image-component/pages/layout-fixed.js
@@ -1,13 +1,14 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
     <ViewSource pathname="pages/layout-fixed.js" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"
-      src="/mountains.jpg"
+      src={mountains}
       layout="fixed"
       width={700}
       height={475}

diff --git a/examples/image-component/pages/layout-intrinsic.js b/examples/image-component/pages/layout-intrinsic.js
@@ -1,13 +1,14 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
     <ViewSource pathname="pages/layout-intrinsic.js" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"
-      src="/mountains.jpg"
+      src={mountains}
       layout="intrinsic"
       width={700}
       height={475}

diff --git a/examples/image-component/pages/layout-responsive.js b/examples/image-component/pages/layout-responsive.js
@@ -1,13 +1,14 @@
 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.jpg"
+      src={mountains}
       layout="responsive"
       width={700}
       height={475}

diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.js
@@ -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