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](<@site/static/img with spaces.png>) + +![img]() + +![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/node_modules/url-loade \`\`\`md ![img](./static/img.png) \`\`\` + +## Images with spaces + +img/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" /> + +img/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=/node_modules/file-loader/dist/cjs.js!./static/img with spaces.png").default} width="200" height="200" /> + +img/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=/node_modules/file-loader/dist/cjs.js!./static/img with one encoded%20space.png").default} width="200" height="200" /> + +img/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[contenthash].[ext]&fallback=/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/_asset-tests/image with spaces.png b/website/_dogfooding/_asset-tests/image with spaces.png new file mode 100644 index 000000000000..f458149e3c8f Binary files /dev/null and b/website/_dogfooding/_asset-tests/image with spaces.png differ diff --git a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx index b54eef02ac59..ec3a7534af01 100644 --- a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx +++ b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx @@ -206,7 +206,7 @@ Code tag + double pipe: || Code tag + double pipe: || -## Images edge cases +## Images ![](/新控制器空间/图片.png) @@ -214,6 +214,10 @@ Code tag + double pipe: || ![](/4/docu.png) +![]() + +![](<@site/_dogfooding/_asset-tests/image with spaces.png>) + ## Details
@@ -359,10 +363,14 @@ See [#3337](https://github.com/facebook/docusaurus/issues/3337) - [/someFile.xyz](/someFile.xyz) +- [/image with space.png]() + - [@site/\_dogfooding/\_asset-tests/someFile.pdf](@site/_dogfooding/_asset-tests/someFile.pdf) - [@site/\_dogfooding/\_asset-tests/someFile.xyz](@site/_dogfooding/_asset-tests/someFile.xyz) +- [@site/\_dogfooding/\_asset-tests/image with space.png](<@site/_dogfooding/_asset-tests/image with spaces.png>) + ### Linking to non-SPA page hosted within website See [#3309](https://github.com/facebook/docusaurus/issues/3309)