文件
有時候，您會想要直接從 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 匯入語法。
- Markdown 語法
- CommonJS require
- 匯入陳述式
使用簡單的 Markdown 語法顯示影像
使用 JSX 影像標籤中的內嵌 CommonJS require 顯示影像
<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
alt="Example banner"
/>
使用 ES import 語法和 JSX 影像標籤顯示影像
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Example banner" />;
以上所有事項都可顯示圖像
如果您使用 @docusaurus/plugin-ideal-image，您需要使用專用的圖像元件（請參閱說明文件）。
檔案
可以藉由在 video、a 錨點連結等等中使用 require 載入方式連結至既有資產，然後使用所回傳的 URL。
# 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)
如果您使用 Markdown 圖像或連結語法，所有資產路徑都將由 Docusaurus 解析成檔案路徑，並自動轉換成 require() 呼叫。您無需在 Markdown 中使用 require()，除非您使用需要自行處理的 JSX 語法。
內嵌 SVG
Docusaurus 開箱即支援內嵌 SVG。
import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;
如果您想藉由 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;
}
主題化圖片
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'),
}}
/>;
GitHub 風格的主題化圖片
GitHub 使用它自己的 影像佈景主題方法包含路徑片段，您可以輕鬆自行實作。
若要使用路徑片段切換圖片的可見性（對於 GitHub 來說，分別為 #gh-dark-mode-only 和 #gh-light-mode-only），請將下列程式碼新增至您的自訂 CSS（如果您不希望與 GitHub 連結，您也可以使用自己的字尾）
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
display: none;
}
靜態資產
假如 Markdown 連結或影像有絕對路徑，路徑會被當作檔案路徑，並從靜態目錄解析。例如，假如您已設定靜態目錄，內容為 ['public', 'static']，那麼對於下列影像
Docusaurus 會嘗試在 static/img/docusaurus.png 和 public/img/docusaurus.png 尋找它。然後連結會轉換成 require() 呼叫，而不是維持為 URL。這在兩個方面是有利的情況
- 您不用擔心基礎網址，這在 Docusaurus 提供資產時將會處理；
- 影像會進入 Webpack 的建置流程，並且其名稱會附加雜湊，這會讓瀏覽器積極快取影像，並提升您網站的效能。
假如您打算撰寫 URL，您可以使用 pathname:// 協定來停用自動資產連結。
這個連結將會產生為 <img src="/img/docusaurus-asset-example-banner.png" alt="banner" />，沒有任何處理或檔案存在檢查。