Astro.js中MDX传图片路径至Picture组件报错求助

错误原因 #

你遇到的LocalImageUsedWrongly错误，核心原因是Astro要求本地图片必须通过ES模块导入的方式引用——即便你在content schema中配置了image()类型，直接在frontmatter里写相对路径仍不符合Astro的资源处理规则。你的posts集合注册是正确的，无需额外操作。

解决方案 #

修改MDX文件，先导入目标图片，再在frontmatter中引用导入的变量即可解决：

步骤1：更新my-first-blogpost.mdx #

// 先导入assets目录下的图片
import blogImage from '../../assets/images/blog/image1.jpg';

---
title: "My First Blogpost"
image: blogImage
imageAlt: "你的图片描述文本"
---
...

步骤2：保留现有配置 #

你的content/config.js和BlogPost.astro组件代码无需修改，schema中的image()类型会自动处理导入后的图片资源，配合<Picture>组件正常生成优化后的图片输出。

补充说明 #

Astro的content集合引用本地资源时有两种规则：

• 若图片放在content目录内部（如content/blog/下），可直接在frontmatter中写相对路径（如./image1.jpg）
• 引用assets目录下的图片，必须通过ES模块导入后再赋值给frontmatter字段，这样Astro才能正确识别并完成资源打包、格式转换等优化流程。

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