Document how to use `basePath` with `next/image`. (#23123)

Supersedes https://github.com/vercel/next.js/pull/23115 for more clarity and a better recommendation.

docs/api-reference/next.config.js/basepath.md

@@ -22,7 +22,7 @@ Note: this value must be set at build time and can not be changed without re-bui
 
 When linking to other pages using `next/link` and `next/router` the `basePath` will be automatically applied.
 
-For example using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
+For example, using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
 
 ```js
 export default function HomePage() {
@@ -43,3 +43,30 @@ Output html:
 ```
 
 This makes sure that you don't have to change all links in your application when changing the `basePath` value.
+
+## Images
+
+When using the [`next/image`](/docs/api-reference/next/image.md) component, you will need to add the `basePath` in front of `src`.
+
+For example, using `/docs/me.png` will properly serve your image when `basePath` is set to `/docs`.
+
+```jsx
+import Image from 'next/image'
+
+function Home() {
+  return (
+    <>
+      <h1>My Homepage</h1>
+      <Image
+        src="/docs/me.png"
+        alt="Picture of the author"
+        width={500}
+        height={500}
+      />
+      <p>Welcome to my homepage!</p>
+    </>
+  )
+}
+
+export default Home
+```

docs/basic-features/image-optimization.md

@@ -94,18 +94,6 @@ If you need a different provider, you can use the [`loader`](/docs/api-reference
 
 > The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
 
-### Base path
-
-If you have deployed your application under a sub-path of a domain using the [`basePath`](/docs/api-reference/next.config.js/basepath.md) option, you will need to configure your images to reference this path.
-
-```js
-module.exports = {
-  images: {
-    path: `yourBasePath/_next/image`,
-  },
-}
-```
-
 ## Caching
 
 The following describes the caching algorithm for the default [loader](#loader). For all other loaders, please refer to your cloud provider's documentation.