Skip to content

Commit

Permalink
feat(markdown): support relative image link without ./
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mister-Hope @meteorlxy
Mister-Hope authored and meteorlxy committed Dec 9, 2022
1 parent 5fac2e6 commit 7e7dae1
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 50 deletions.
12 changes: 10 additions & 2 deletions docs/guide/assets.md
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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 `<img>` tag:

```md
![Image from dependency](package-name/image.png)
<img src="package-name/image.png" alt="Image from dependency">
```

The path aliases that set in config file are also supported:
Expand All @@ -105,7 +113,7 @@ export default {
```

```md
![Image from path alias](@alias/image.png)
<img src="@alias/image.png" alt="Image from path alias">
```

::: tip
Expand Down
12 changes: 10 additions & 2 deletions docs/zh/guide/assets.md
View file
Expand Up @@ -8,6 +8,12 @@
![图片](./image.png)
```

或

```md
![图片](image.png)
```

一般情况下，我们推荐你使用这种方式来引用图片，因为人们通常会把图片放在引用它的 Markdown 文件附近。

## Public 文件
Expand Down Expand Up @@ -86,8 +92,10 @@ const logoPath = ref('/images/hero.png')
npm install -D package-name
```

由于 Markdown 会默认将图片链接视为相对链接，你需要使用 `<img>` 标签:

```md
![来自依赖包的图片](package-name/image.png)
<img src="package-name/image.png" alt="来自依赖包的图片">
```

在配置文件中设置的路径别名也同样支持：
Expand All @@ -105,7 +113,7 @@ export default {
```

```md
![来自路径别名的图片](@alias/image.png)
<img src="@alias/image.png" alt="来自路径别名的图片">
```

::: tip
Expand Down
6 changes: 4 additions & 2 deletions packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts
View file
Expand Up @@ -46,7 +46,8 @@ export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
`${prefix}${quote}${resolveLink(
src.trim(),
relativePathPrefix,
env
env,
true
)}${quote}`
)
// handle srcset
Expand All @@ -64,7 +65,8 @@ export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
`${resolveLink(
url.trim(),
relativePathPrefix,
env
env,
true
)}${descriptor.replace(/[ \n]+/g, ' ').trimEnd()}`
)
)
Expand Down
12 changes: 10 additions & 2 deletions packages/markdown/src/plugins/assetsPlugin/resolveLink.ts
View file
Expand Up @@ -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
Expand Down
52 changes: 10 additions & 42 deletions packages/markdown/tests/plugins/assetsPlugin.spec.ts
View file
Expand Up @@ -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)',
Expand Down Expand Up @@ -60,27 +52,19 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src="@source/../out.png" alt="out">',
'<img src="@source/sub/汉字.png" alt="汉字">',
'<img src="@source/sub/100%.png" alt="100%">',
// aliases
'<img src="@alias/foo.png" alt="alias">',
'<img src="@alias/汉字.png" alt="汉字">',
'<img src="@alias/100%.png" alt="100%">',
// webpack legacy aliases
'<img src="~@alias/foo.png" alt="~alias">',
'<img src="~@alias/汉字.png" alt="~汉字">',
'<img src="~@alias/100%.png" alt="~100%">',
// absolute paths
'<img src="/absolute.png" alt="absolute">',
'<img src="/foo/absolute.png" alt="absolute-foo">',
// no-prefix paths
'<img src="no-prefix.png" alt="no-prefix">',
'<img src="foo/no-prefix.png" alt="no-prefix-foo">',
'<img src="@source/sub/no-prefix.png" alt="no-prefix">',
'<img src="@source/sub/foo/no-prefix.png" alt="no-prefix-foo">',
// keep as is
'<img src="http://foobar.com/icon.png" alt="url">',
'<img src="" alt="empty">',
// invalid paths
'<img src=".../invalid.png" alt="invalid">',
'<img src=".../汉字.png" alt="汉字">',
'<img src=".../100%.png" alt="100%">',
'<img src="@source/sub/.../invalid.png" alt="invalid">',
'<img src="@source/sub/.../汉字.png" alt="汉字">',
'<img src="@source/sub/.../100%.png" alt="100%">',
],
},
{
Expand All @@ -101,27 +85,19 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src="@foo/../out.png" alt="out">',
'<img src="@foo/sub/汉字.png" alt="汉字">',
'<img src="@foo/sub/100%.png" alt="100%">',
// aliases
'<img src="@alias/foo.png" alt="alias">',
'<img src="@alias/汉字.png" alt="汉字">',
'<img src="@alias/100%.png" alt="100%">',
// webpack legacy aliases
'<img src="~@alias/foo.png" alt="~alias">',
'<img src="~@alias/汉字.png" alt="~汉字">',
'<img src="~@alias/100%.png" alt="~100%">',
// absolute paths
'<img src="/absolute.png" alt="absolute">',
'<img src="/foo/absolute.png" alt="absolute-foo">',
// no-prefix paths
'<img src="no-prefix.png" alt="no-prefix">',
'<img src="foo/no-prefix.png" alt="no-prefix-foo">',
'<img src="@foo/sub/no-prefix.png" alt="no-prefix">',
'<img src="@foo/sub/foo/no-prefix.png" alt="no-prefix-foo">',
// keep as is
'<img src="http://foobar.com/icon.png" alt="url">',
'<img src="" alt="empty">',
// invalid paths
'<img src=".../invalid.png" alt="invalid">',
'<img src=".../汉字.png" alt="汉字">',
'<img src=".../100%.png" alt="100%">',
'<img src="@foo/sub/.../invalid.png" alt="invalid">',
'<img src="@foo/sub/.../汉字.png" alt="汉字">',
'<img src="@foo/sub/.../100%.png" alt="100%">',
],
},
{
Expand All @@ -139,14 +115,6 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src="../../out.png" alt="out">',
'<img src="./汉字.png" alt="汉字">',
'<img src="./100%.png" alt="100%">',
// aliases
'<img src="@alias/foo.png" alt="alias">',
'<img src="@alias/汉字.png" alt="汉字">',
'<img src="@alias/100%.png" alt="100%">',
// webpack legacy aliases
'<img src="~@alias/foo.png" alt="~alias">',
'<img src="~@alias/汉字.png" alt="~汉字">',
'<img src="~@alias/100%.png" alt="~100%">',
// absolute paths
'<img src="/absolute.png" alt="absolute">',
'<img src="/foo/absolute.png" alt="absolute-foo">',
Expand Down

0 comments on commit 7e7dae1

Please sign in to comment.