vitepress markdown 图片无法加载
时间: 2025-02-19 10:31:29 浏览: 60
### 解决 VitePress 中 Markdown 图片无法加载的问题
在处理 `VitePress` 中 Markdown 文件内的图片加载失败问题时,有几个常见原因可能导致此现象。通常情况下,这涉及到相对路径配置不当、资源未被正确打包或是静态资产放置位置不正确等问题。
#### 路径设置与文件结构
确保项目中的图像和其他静态资源位于 `/public` 或者 `/assets` 目录下,并且在 Markdown 文档里使用相对于站点根目录的链接来引用这些资源[^1]。例如:
如果有一个名为 `car.png` 的图片存放在项目的 `public/images/` 文件夹内,则应在 Markdown 文件中这样写入图片标签:
```markdown

```
这种做法可以保证无论页面如何嵌套,都能通过浏览器访问到对应的图片资源。
#### 配置别名或基础 URL
有时为了适应不同的部署环境,可能需要调整 `config.js` 或 `.env` 文件里的 base 属性,指定一个基本URL前缀用于构建最终输出地址。当设置了非空的基础路径时,请记得更新所有内部链接使之带上该前缀。
对于上述例子而言,在设置了 `base: '/my-project/'` 后,应该修改为如下形式:
```markdown

```
#### 清理缓存并重新编译
偶尔本地开发过程中产生的临时文件可能会干扰最新更改的应用效果。尝试清除 node_modules 和 dist 文件夹后再运行 npm install 命令完成依赖项重装,最后重启服务器以查看问题是否得到解决。
```bash
rm -rf node_modules/.cache/
npm run build && npm start
```
阅读全文
相关推荐


















