Skip to main content

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/UsePublic 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.