跳到主要内容
版本：3.8.1

资源

有时你希望直接从 Markdown 文件链接到资源（例如 docx 文件、图片等），将资源与使用它的 Markdown 文件放在一起会很方便。

让我们设想以下文件结构

# Your doc
/website/docs/myFeature.mdx

# Some assets you want to use
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example.docx

图片​

你可以通过三种不同的方式显示图片：Markdown 语法、CJS require 或 ES imports 语法。

使用简单的 Markdown 语法显示图片

![Example banner](./assets/docusaurus-asset-example-banner.png)

以上所有方法都将显示图片

https://:3000

My image alternative text

注意

如果你正在使用 @docusaurus/plugin-ideal-image，你需要使用专门的图片组件，如文档所述。

文件​

同样地，你可以通过 require 文件并使用返回的 URL 来链接到现有资源，用于 video、a 锚点链接等。

# My Markdown page

<a target="\_blank" href={require('./assets/docusaurus-asset-example.docx').default}> Download this docx </a>

or

[Download this docx using Markdown](./assets/docusaurus-asset-example.docx)
https://:3000
下载此 docx 文件

使用 Markdown 下载此 docx 文件

Markdown 链接始终是文件路径

如果你使用 Markdown 图片或链接语法，所有资源路径都将被 Docusaurus 解析为文件路径，并自动转换为 require() 调用。除非你使用 JSX 语法，否则你无需在 Markdown 中使用 require()，JSX 语法需要你自己处理。

内联 SVG​

Docusaurus 开箱即用地支持内联 SVG。

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg />;
https://:3000

如果你想通过 CSS 改变 SVG 图片的部分内容，这会很有用。例如，你可以根据当前主题更改 SVG 的颜色。

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg className="themedDocusaurus" />;
[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
  fill: greenyellow;
}

[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
  fill: seagreen;
}
https://:3000

主题图片​

Docusaurus 支持主题图片：ThemedImage 组件（包含在主题中）允许你根据当前主题切换图片源。

import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;
https://:3000
Docusaurus themed imageDocusaurus themed image

GitHub 风格的主题图片​

GitHub 使用其自己的 图片主题化方法，带路径片段，你可以轻松地自行实现。

要使用路径片段切换图片的可见性（对于 GitHub，是 #gh-dark-mode-only 和 #gh-light-mode-only），请将以下内容添加到你的自定义 CSS 中（如果你不想与 GitHub 耦合，也可以使用自己的后缀）

src/css/custom.css
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
  display: none;
}
![Docusaurus themed image](/img/docusaurus_keytar.svg#gh-light-mode-only)![Docusaurus themed image](/img/docusaurus_speed.svg#gh-dark-mode-only)
https://:3000

Docusaurus themed imageDocusaurus themed image

静态资源​

如果 Markdown 链接或图片具有绝对路径，则该路径将被视为文件路径，并从静态目录中解析。例如，如果你已将静态目录配置为 ['public', 'static']，则对于以下图片

my-doc.md
![An image from the static](/img/docusaurus.png)

Docusaurus 将尝试在 static/img/docusaurus.png 和 public/img/docusaurus.png 中查找。然后，该链接将转换为 require() 调用，而不是保留为 URL。这在两个方面是可取的：

  1. 你无需担心基本 URL，Docusaurus 会在提供资源时处理它；
  2. 图片进入 Webpack 的构建流程，其名称将附加一个哈希值，这使得浏览器能够积极缓存图片并提高你的网站性能。

如果你打算编写 URL，可以使用 pathname:// 协议禁用自动资源链接。

![banner](pathname:///img/docusaurus-asset-example-banner.png)

此链接将生成为 <img src="/img/docusaurus-asset-example-banner.png" alt="banner" />，无需任何处理或文件存在检查。