diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md
index 61b961202cb6..aeae06879eca 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md
+++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md
@@ -29,3 +29,13 @@ in paragraph ![img](static/img.png)
 ```md
 ![img](./static/img.png)
 ```
+
+## Images with spaces
+
+![img](</img with spaces.png>)
+
+![img](<@site/static/img with spaces.png>)
+
+![img](</img with one encoded%2520space.png>)
+
+![img](<@site/static/img with one encoded%2520space.png>)
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with one encoded%20space.png b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with one encoded%20space.png
new file mode 100644
index 000000000000..f458149e3c8f
Binary files /dev/null and b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with one encoded%20space.png differ
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with spaces.png b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with spaces.png
new file mode 100644
index 000000000000..f458149e3c8f
Binary files /dev/null and b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with spaces.png differ
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap
index 4745422c1ed7..8572403706d6 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap
@@ -48,5 +48,15 @@ in paragraph <img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loade
 \`\`\`md
 ![img](./static/img.png)
 \`\`\`
+
+## Images with spaces
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with one encoded%20space.png").default} width="200" height="200" />
+
+<img alt="img" src={require("!<PROJECT_ROOT>/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=<PROJECT_ROOT>/node_modules/file-loader/dist/cjs.js!./static/img with one encoded%20space.png").default} width="200" height="200" />
 "
 `;
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
index 5ae25e5e3087..b3196df88a6d 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
@@ -98,6 +98,7 @@ async function toImageRequireNode(
       });
     }
   } catch (err) {
+    console.error(err);
     // Workaround for https://github.com/yarnpkg/berry/pull/3889#issuecomment-1034469784
     // TODO remove this check once fixed in Yarn PnP
     if (!process.versions.pnp) {
@@ -152,10 +153,7 @@ async function getImageAbsolutePath(
     return imageFilePath;
   }
   // relative paths are resolved against the source file's folder
-  const imageFilePath = path.join(
-    path.dirname(filePath),
-    decodeURIComponent(imagePath),
-  );
+  const imageFilePath = path.join(path.dirname(filePath), imagePath);
   await ensureImageFileExist(imageFilePath, filePath);
   return imageFilePath;
 }
@@ -180,9 +178,14 @@ async function processImageNode(target: Target, context: Context) {
     return;
   }
 
+  // We decode it first because Node Url.pathname is always encoded
+  // while the image file-system path are not.
+  // See https://github.com/facebook/docusaurus/discussions/10720
+  const decodedPathname = decodeURIComponent(parsedUrl.pathname);
+
   // We try to convert image urls without protocol to images with require calls
   // going through webpack ensures that image assets exist at build time
-  const imagePath = await getImageAbsolutePath(parsedUrl.pathname, context);
+  const imagePath = await getImageAbsolutePath(decodedPathname, context);
   await toImageRequireNode(target, imagePath, context);
 }
 
diff --git a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
index 2c6bcb1db30d..ec3a7534af01 100644
--- a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx	
+++ b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx	
@@ -214,7 +214,9 @@ Code tag + double pipe: <code>||</code>
 
 ![](/4/docu.png)
 
-![](/image with spaces.png)
+![](</image with spaces.png>)
+
+![](<@site/_dogfooding/_asset-tests/image with spaces.png>)
 
 ## Details