Update next/image docs and examples (#26150)

This updates the `next/image` docs and examples to add missing information.

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
 

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:

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"
 }

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>

examples/image-component/pages/placeholder.js

@@ -4,12 +4,11 @@ import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
-    <h1>Image Component With Layout Responsive</h1>
+    <ViewSource pathname="pages/placeholder.js" />
+    <h1>Image Component With Placeholder</h1>
     <Image
       alt="Mountains"
       src={mountains}
-      layout="responsive"
       placeholder="blur"
       width={700}
       height={475}