资源

Sometimes you want to link to static assets directly from Markdown files, and it is convenient to co-locate the asset next to the Markdown file using it.

我们预先设置了 Webpack 加载器以处理较为常见的文件类型。这样在您加载文件时，您仅需要添加文件网址，Webpack 就会将其自动复制到输出目录中。

请思考如下文件结构：

# 您的文档/website/docs/myFeature.mdx
# 您想用的一些资源/website/docs/assets/docusaurus-asset-example-banner.png/website/docs/assets/docusaurus-asset-example-pdf.pdf

图像

You can display images in three different ways: Markdown syntax, JSX require or ES imports syntax.

Display images using simple Markdown syntax:

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

Display images using inline CommonJS require in JSX image tag:

<img  src={require('./assets/docusaurus-asset-example-banner.png').default}  alt="Example banner"/>

Display images using ES import syntax and JSX image tag:

import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Example banner" />

这样就能显示图片：

note

若您使用 @docusaurus/plugin-ideal-image，您则需要根据其文档所述使用独立的图像组件。

文件

同样，您可以先通过 require 链入资源文件，再使用返回图像、链接等资源的网址。

# 我的 Markdown 页面
<a  target="_blank"  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>  下载此 PDF</a>
或
[使用 Markdown 下载此 PDF](./assets/docusaurus-asset-example-pdf.pdf)

下载此 PDF

使用 Markdown 下载此 PDF

内联 SVG

Docusaurus 原生支持内嵌 SVG。

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;

此方法有助于您需要通过 CSS 更改部分 SVG 图像时的场景。 举个例子，您可以基于当前主题更改 SVG 的颜色。

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg className="themedDocusaurus" />;

html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {  fill: greenyellow;}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {  fill: seagreen;}

主题化图像

Docusaurus 支持主题化图像：ThemedImage 组件（classic/bootstrap 主题自带）允许您根据当前主题更改图像源。

import ThemedImage from '@theme/ThemedImage';
<ThemedImage  alt="Docusaurus 主题图像"  sources={{    light: useBaseUrl('/img/docusaurus_light.svg'),    dark: useBaseUrl('/img/docusaurus_dark.svg'),  }}/>;