Docusaurus构建后图片无法加载问题排查求助

问题根源 #

你遇到的核心问题是静态资源路径写法与baseUrl配置不匹配：

• 开发模式下，/images/Buttons.png会指向本地static/images/目录，所以能正常显示；
• 但构建后，Docusaurus会把static/下的静态资源打包到build/${baseUrl}/assets/images/目录（即build/prsm/doc/help/assets/images/），但你页面里的路径还是/images/Buttons.png，浏览器会直接向http://localhost/images/Buttons.png请求，自然找不到资源。

具体解决方案 #

方案1：改用相对路径（推荐） #

将图片路径改为相对路径，适配文档结构。假设你的GettingStarted.md在docs/目录，图片放在static/images/，写法如下：
用HTML标签：

<img src="../images/Buttons.png" width="400"/>

或用Markdown图片语法（更符合Docusaurus规范）：

![Buttons](../images/Buttons.png){width="400"}

构建时Docusaurus会自动将路径转换为assets/images/Buttons.png，并适配baseUrl。

方案2：使用Docusaurus官方图片组件 #

用<StaticImage>组件替代原生img标签，它会自动处理路径转换、图片优化，适配baseUrl：

import StaticImage from '@docusaurus/StaticImage';

<StaticImage
  src="/images/Buttons.png"
  width={400}
  alt="Buttons"
/>

方案3：调整绝对路径（不推荐，硬编码风险） #

如果坚持用绝对路径，需要把路径改成包含baseUrl的完整绝对路径：

<img src="/prsm/doc/help/images/Buttons.png" width="400"/>

但这种写法硬编码了baseUrl，后续若baseUrl变更，所有图片路径都要修改。

额外修正 #

你的favicon配置/images/favicon.ico同样存在构建后路径错误问题，建议同步改用上述方案之一修正。

内容的提问来源于stack exchange，提问作者Nigel