fix(v2): fix markdown images always using webpack url-loader (#3180)

* fix markdown images always using file-loader + move assets to a dedicated subfolder

* update snapshot
This commit is contained in:
Sébastien Lorber 2020-07-31 20:50:39 +02:00 committed by GitHub
parent 7cceee7e38
commit 62c61c9d8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 17 deletions

View file

@ -12,11 +12,11 @@ exports[`transformImage plugin pathname protocol 1`] = `
exports[`transformImage plugin transform md images to <img /> 1`] = `
"![img](https://example.com/img.png)
<img src={require(\\"!url-loader!./img.png\\").default} />
<img src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default} />
<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default} />
<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default} />
<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default} title={\\"Title\\"} /> ![img](/img.png)
<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default} title={\\"Title\\"} /> ![img](/img.png)
## Heading
@ -24,6 +24,6 @@ exports[`transformImage plugin transform md images to <img /> 1`] = `
![img](./img.png)
\`\`\`
<img alt={\\"img\\"} src={require(\\"!url-loader!./img.png\\").default} />
<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./img.png\\").default} />
"
`;

View file

@ -9,6 +9,11 @@ const visit = require('unist-util-visit');
const path = require('path');
const url = require('url');
const fs = require('fs-extra');
const {getFileLoaderUtils} = require('@docusaurus/core/lib/webpack/utils');
const {
loaders: {inlineMarkdownImageFileLoader},
} = getFileLoaderUtils();
// Needed to throw errors with computer-agnostic path messages
// Absolute paths are too dependant of user FS
@ -62,7 +67,7 @@ async function processImageNode(node, {filePath, staticDir}) {
node.type = 'jsx';
node.value = `<img ${node.alt ? `alt={"${node.alt}"}` : ''} ${
node.url
? `src={require("!url-loader!${
? `src={require("${inlineMarkdownImageFileLoader}${
node.url.startsWith('./') ? node.url : `./${node.url}`
}").default}`
: ''