Images and static assets
Keep images under static/, grouped by purpose. Reference them with public URLs or import from @site/static/.... This project does not use webpack path aliases for images.
1. Directories
Path under my-docs/static/ | Use | Public URL prefix |
|---|---|---|
img/site/ | Site-wide: logo, hero, footer art, brand assets not tied to one doc | /img/site/ |
img/shared/ | Doc images shared by zh + en (no UI language in the image) | /img/shared/ |
img/zh/ | Chinese-only screenshots / annotated figures | /img/zh/ |
img/en/ | English-only screenshots / annotated figures | /img/en/ |
Prefer shared when one file is enough; split into zh / en only when the image itself is language-specific.
Site assets (logo.svg, homepage undraw_*.svg, favicon.ico, docusaurus-social-card.jpg) live under static/img/site/; docusaurus.config.js references img/site/ for favicon, OG image, and navbar logo.
Shared doc images (Modbus_Protocol_*.jpg, DAM-8RO-8DI.jpg, Modbus-RTU-PWM-Input-8CH-1.jpg, …) live under static/img/shared/.
2. Referencing in MDX
Option A — public URL
<img src="/img/shared/your-diagram.png" alt="Description" />
Option B — import + @site/static
import diagram from '@site/static/img/shared/your-diagram.png';
<img src={diagram} alt="Description" />
@site points at the project root; the path after it mirrors the path under static/.
3. Naming
Lowercase kebab-case, descriptive names (e.g. dam-8ro-terminal-block.png).
The canonical Chinese copy of this policy lives in the default locale tree as docs/image-assets-guide.md.