3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-23 19:48:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(mdx-loader): fix md image paths with spaces bug related to transformImage encoding problem (#10723)

Browse source
This commit is contained in:
Sébastien Lorber 2024-11-28 16:39:43 +01:00 • committed by GitHub
parent ffdd415129
commit fb7ad2c1bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 37 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/img.md generated
View file

@ -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>)

BIN
packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with one encoded%20space.png generated Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

BIN
packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img with spaces.png generated Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

10
packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap
View file

@ -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" />
"
`;

13
packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts
View file

@ -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);
}