diff --git a/docs/guide/assets.md b/docs/guide/assets.md index 4d5190e52b..7d3abb7fdb 100644 --- a/docs/guide/assets.md +++ b/docs/guide/assets.md @@ -8,6 +8,12 @@ You can reference any assets using relative URLs in your Markdown content: ![An image](./image.png) ``` +or + +```md +![An image](image.png) +``` + This is generally the suggested way to import images, as users usually place images near the Markdown file that references them. ## Public Files @@ -86,8 +92,10 @@ Although it is not a common usage, you can reference images from dependent packa npm install -D package-name ``` +Since markdown image syntax regards image links as relative paths by default, you need to use `` tag: + ```md -![Image from dependency](package-name/image.png) +Image from dependency ``` The path aliases that set in config file are also supported: @@ -105,7 +113,7 @@ export default { ``` ```md -![Image from path alias](@alias/image.png) +Image from path alias ``` ::: tip diff --git a/docs/zh/guide/assets.md b/docs/zh/guide/assets.md index 730497c854..80df50b7df 100644 --- a/docs/zh/guide/assets.md +++ b/docs/zh/guide/assets.md @@ -8,6 +8,12 @@ ![图片](./image.png) ``` +或 + +```md +![图片](image.png) +``` + 一般情况下,我们推荐你使用这种方式来引用图片,因为人们通常会把图片放在引用它的 Markdown 文件附近。 ## Public 文件 @@ -86,8 +92,10 @@ const logoPath = ref('/images/hero.png') npm install -D package-name ``` +由于 Markdown 会默认将图片链接视为相对链接,你需要使用 `` 标签: + ```md -![来自依赖包的图片](package-name/image.png) +来自依赖包的图片 ``` 在配置文件中设置的路径别名也同样支持: @@ -105,7 +113,7 @@ export default { ``` ```md -![来自路径别名的图片](@alias/image.png) +来自路径别名的图片 ``` ::: tip diff --git a/packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts b/packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts index 04621a5200..53ea0e89e6 100644 --- a/packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts +++ b/packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts @@ -46,7 +46,8 @@ export const assetsPlugin: PluginWithOptions = ( `${prefix}${quote}${resolveLink( src.trim(), relativePathPrefix, - env + env, + true )}${quote}` ) // handle srcset @@ -64,7 +65,8 @@ export const assetsPlugin: PluginWithOptions = ( `${resolveLink( url.trim(), relativePathPrefix, - env + env, + true )}${descriptor.replace(/[ \n]+/g, ' ').trimEnd()}` ) ) diff --git a/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts b/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts index 86922bfae9..7c43948ba2 100644 --- a/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts +++ b/packages/markdown/src/plugins/assetsPlugin/resolveLink.ts @@ -5,14 +5,22 @@ import type { MarkdownEnv } from '../../types.js' export const resolveLink = ( link: string, relativePathPrefix: string, - env: MarkdownEnv + env: MarkdownEnv, + strict = false ): string => { // decode link to ensure bundler can find the file correctly let resolvedLink = decode(link) + // check if the link is relative path + const isRelativePath = strict + ? // in strict mode, only link that starts with `./` or `../` is considered as relative path + /^\.{1,2}\//.test(link) + : // in non-strict mode, link that does not start with `/` and does not have protocol is considered as relative path + !link.startsWith('/') && !/[A-z]+:\/\//.test(link) + // if the link is relative path, and the `env.filePathRelative` exists // add `@source` alias to the link - if (/^\.{1,2}\//.test(link) && env.filePathRelative) { + if (isRelativePath && env.filePathRelative) { resolvedLink = `${relativePathPrefix}/${path.join( path.dirname(env.filePathRelative), resolvedLink diff --git a/packages/markdown/tests/plugins/assetsPlugin.spec.ts b/packages/markdown/tests/plugins/assetsPlugin.spec.ts index 7d37163a37..beb2c10652 100644 --- a/packages/markdown/tests/plugins/assetsPlugin.spec.ts +++ b/packages/markdown/tests/plugins/assetsPlugin.spec.ts @@ -15,20 +15,18 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => { '![out](../../out.png)', '![汉字](./汉字.png)', '![100%](./100%.png)', - // aliases - '![alias](@alias/foo.png)', - '![汉字](@alias/汉字.png)', - '![100%](@alias/100%.png)', - // webpack legacy aliases - '![~alias](~@alias/foo.png)', - '![~汉字](~@alias/汉字.png)', - '![~100%](~@alias/100%.png)', // absolute paths '![absolute](/absolute.png)', '![absolute-foo](/foo/absolute.png)', // no-prefix paths '![no-prefix](no-prefix.png)', '![no-prefix-foo](foo/no-prefix.png)', + '![alias](@alias/foo.png)', + '![汉字](@alias/汉字.png)', + '![100%](@alias/100%.png)', + '![~alias](~@alias/foo.png)', + '![~汉字](~@alias/汉字.png)', + '![~100%](~@alias/100%.png)', // keep as is '![url](http://foobar.com/icon.png)', '![empty]()', @@ -60,27 +58,25 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => { 'out', '汉字', '100%', - // aliases - 'alias', - '汉字', - '100%', - // webpack legacy aliases - '~alias', - '~汉字', - '~100%', // absolute paths 'absolute', 'absolute-foo', // no-prefix paths - 'no-prefix', - 'no-prefix-foo', + 'no-prefix', + 'no-prefix-foo', + 'alias', + '汉字', + '100%', + '~alias', + '~汉字', + '~100%', // keep as is 'url', 'empty', // invalid paths - 'invalid', - '汉字', - '100%', + 'invalid', + '汉字', + '100%', ], }, { @@ -101,27 +97,25 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => { 'out', '汉字', '100%', - // aliases - 'alias', - '汉字', - '100%', - // webpack legacy aliases - '~alias', - '~汉字', - '~100%', // absolute paths 'absolute', 'absolute-foo', // no-prefix paths - 'no-prefix', - 'no-prefix-foo', + 'no-prefix', + 'no-prefix-foo', + 'alias', + '汉字', + '100%', + '~alias', + '~汉字', + '~100%', // keep as is 'url', 'empty', // invalid paths - 'invalid', - '汉字', - '100%', + 'invalid', + '汉字', + '100%', ], }, { @@ -139,20 +133,18 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => { 'out', '汉字', '100%', - // aliases - 'alias', - '汉字', - '100%', - // webpack legacy aliases - '~alias', - '~汉字', - '~100%', // absolute paths 'absolute', 'absolute-foo', // no-prefix paths 'no-prefix', 'no-prefix-foo', + 'alias', + '汉字', + '100%', + '~alias', + '~汉字', + '~100%', // keep as is 'url', 'empty',