From f3cbdf0b02dd306e4232507dbf1c62702029fdd5 Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Tue, 16 Mar 2021 14:56:41 -0500
Subject: [PATCH] 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 | 29 ++++++++++++++++++-
 docs/basic-features/image-optimization.md     | 12 --------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/docs/api-reference/next.config.js/basepath.md b/docs/api-reference/next.config.js/basepath.md
index 143763f0f1..beb1217044 100644
--- a/docs/api-reference/next.config.js/basepath.md
+++ b/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
+```
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index 8fcb59173a..52a248861c 100644
--- a/docs/basic-features/image-optimization.md
+++ b/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.
-- 
GitLab