From 46ec9101671ee006d126e3946fd8ace33d5c5cb7 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Tue, 15 Jun 2021 18:42:29 -0400
Subject: [PATCH 1/2] Update next/image docs and examples

---
 docs/api-reference/next/image.md              |  5 ++++-
 docs/basic-features/image-optimization.md     | 19 +++++++++++++++-
 examples/image-component/package.json         |  6 ++---
 examples/image-component/pages/index.js       | 22 ++++++++++++++-----
 examples/image-component/pages/placeholder.js | 13 +++--------
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 992ef06ea65e4..88f5b7fe75914 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -166,7 +166,10 @@ Should only be used when the image is visible above the fold. Defaults to
 ### placeholder
 
 A placeholder to use while the image is loading, possible values are `blur` or `empty`. Defaults to `empty`.
-When `placeholder="blur"`, the `blurDataURL` will be used as the placeholder. If the `src` is an object from a static import, then `blurDataURL` will automatically be populated. If the `src` is a string, then you must provide the [`blurDataURL` property](#blurdataurl).
+
+When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. Otherwise you must provide the [`blurDataURL`](#blurdataurl) property.
+
+When `empty`, there will be no placeholder while the image is loading, only empty space.
 
 ## Advanced Props
 
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index 52a248861c40c..43a65d2790c7b 100644
--- a/docs/basic-features/image-optimization.md
+++ b/docs/basic-features/image-optimization.md
@@ -31,13 +31,14 @@ To add an image to your application, import the [`next/image`](/docs/api-referen
 
 ```jsx
 import Image from 'next/image'
+import profilePic from '../public/me.png'
 
 function Home() {
   return (
     <>
       <h1>My Homepage</h1>
       <Image
-        src="/me.png"
+        src={profilePic}
         alt="Picture of the author"
         width={500}
         height={500}
@@ -138,6 +139,22 @@ module.exports = {
 }
 ```
 
+### Disable Static Imports
+
+The default behavior allows you to import static files such as `import icon from './icon.png` and then pass that to the `src` property.
+
+In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently.
+
+You can disable static image imports with the following configuration below.
+
+```js
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
 ## Related
 
 For more information on what to do next, we recommend the following sections:
diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index bf4531e967ed1..0360502f8ade0 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -7,9 +7,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "canary",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "next": "latest",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "license": "MIT"
 }
diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.js
index 931f34a3f1440..1dcc3cc031b5a 100644
--- a/examples/image-component/pages/index.js
+++ b/examples/image-component/pages/index.js
@@ -65,18 +65,28 @@ const Index = () => (
       <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.
+        The <Code>placeholder</Code> property tells the image what to do while
+        loading.
       </p>
       <p>
-        <Link href="/placeholder">
-          <a>See an example of the blurry placeholder.</a>
-        </Link>
+        You can optionally enable a blur-up placeholder while the high
+        resolution image loads.
       </p>
+      <p>
+        Try it out below (you may need to disable cache in dev tools to see the
+        effect if you already visited):
+      </p>
+      <ul>
+        <li>
+          <Link href="/placeholder">
+            <a>placeholder="blur"</a>
+          </Link>
+        </li>
+      </ul>
       <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{' '}
+        The following is an example of a reference to an internal image from the{' '}
         <Code>public</Code> directory.
       </p>
       <p>
diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.js
index 4a0fce5c45c24..fdbab7b7201f2 100644
--- a/examples/image-component/pages/placeholder.js
+++ b/examples/image-component/pages/placeholder.js
@@ -4,16 +4,9 @@ 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}
-    />
+    <ViewSource pathname="pages/placeholder.js" />
+    <h1>Image Component With Placeholder</h1>
+    <Image alt="Mountains" src={mountains} placeholder="blur" />
   </div>
 )
 

From 85102704983fe8299b191a0beaf51c40fc87778b Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Tue, 15 Jun 2021 18:58:04 -0400
Subject: [PATCH 2/2] Add width/height back

---
 examples/image-component/pages/placeholder.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.js
index fdbab7b7201f2..2366080b1599c 100644
--- a/examples/image-component/pages/placeholder.js
+++ b/examples/image-component/pages/placeholder.js
@@ -6,7 +6,13 @@ const Responsive = () => (
   <div>
     <ViewSource pathname="pages/placeholder.js" />
     <h1>Image Component With Placeholder</h1>
-    <Image alt="Mountains" src={mountains} placeholder="blur" />
+    <Image
+      alt="Mountains"
+      src={mountains}
+      placeholder="blur"
+      width={700}
+      height={475}
+    />
   </div>
 )