AstroJS中Markdown本地图片引用问题的解决方法

问题场景 #

你的AstroJS项目采用按日期前缀组织博客内容的结构：

pages
  blogs
    20220505
      index.md
      img/pikachu.png
    20230401
      index.md
      img/charizard.png

在20230401/index.md中使用相对路径引用本地图片：

---
layout: ../../../layouts/Blog.astro
title: '史上最佳宝可梦'
subtitle: '喷火龙'
poster: '/images/roadmap.jpg'
---

喷火龙超棒

![](./img/charizard.png)

执行npm run dev时触发"missing sharp"错误。

解决步骤 #

• 安装sharp依赖包，在项目根目录执行命令：

  npm install sharp
  

• 若Windows系统安装失败，需确保已安装Windows构建工具（包含Python和C++编译环境），以管理员权限运行以下命令安装：

  npm install --global windows-build-tools
  

• 若使用macOS，需先安装Xcode命令行工具，执行以下命令：

  xcode-select --install
  

• 安装完成后重新启动开发服务：

  npm run dev
  

补充说明 #

Astro处理本地图片（尤其是图片优化、格式转换场景）时依赖sharp这个高性能图片处理库，缺少该库会导致图片加载相关功能无法正常运行。

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