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)
+
```
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)
+
```
::: 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..ef901155be 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)
// 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 (
+ (strict
+ ? // only link starts with `./` or `../`
+ /^\.{1,2}\//.test(link)
+ : // link without protocol and not absolute links
+ !link.startsWith('/') && !/[A-z]+:\/\//.test(link)) &&
+ 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..1c3789547d 100644
--- a/packages/markdown/tests/plugins/assetsPlugin.spec.ts
+++ b/packages/markdown/tests/plugins/assetsPlugin.spec.ts
@@ -15,14 +15,6 @@ 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)',
@@ -60,27 +52,19 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'',
'',
'',
- // aliases
- '',
- '',
- '',
- // webpack legacy aliases
- '',
- '',
- '',
// absolute paths
'',
'',
// no-prefix paths
- '',
- '',
+ '',
+ '',
// keep as is
'',
'',
// invalid paths
- '',
- '',
- '',
+ '',
+ '',
+ '',
],
},
{
@@ -101,27 +85,19 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'',
'',
'',
- // aliases
- '',
- '',
- '',
- // webpack legacy aliases
- '',
- '',
- '',
// absolute paths
'',
'',
// no-prefix paths
- '',
- '',
+ '',
+ '',
// keep as is
'',
'',
// invalid paths
- '',
- '',
- '',
+ '',
+ '',
+ '',
],
},
{
@@ -139,14 +115,6 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'',
'',
'',
- // aliases
- '',
- '',
- '',
- // webpack legacy aliases
- '',
- '',
- '',
// absolute paths
'',
'',