博客Front Matter中image字段如何引用同目录Assets文件夹内图片？

常见原因及修复方案 #

1. 路径基准不匹配 #

不同静态博客框架对Front Matter里相对路径的基准定义有差异：

• 若框架以站点根目录为基准，需确认assets/images是否在根目录下。比如站点结构是blog/assets/images/xxx.webp，路径要写成/blog/assets/images/otOARU_mJTlg-cover.webp（开头加斜杠代表根目录）
• 若框架以当前文章目录为基准，比如文章存在posts/2024/xxx.md，要么把图片放到posts/2024/assets/images/xxx.webp，要么路径写成../../assets/images/otOARU_mJTlg-cover.webp

2. 资源目录配置错误 #

检查框架配置文件：

• Hexo需确保_config.yml中post_asset_folder设为true，才能正确解析文章的相对资源路径
• Hugo要确认config.toml里assetDir设置为assets，并配合{{< img src="xxx" >}}这类短代码使用Front Matter中的路径

3. 构建时资源未被拷贝 #

部分框架不会自动将assets内的图片同步到构建输出目录（如public），需手动配置：

• Hexo可在_config.yml添加：

  include:
    - assets/images/**/*
  

• Jekyll默认会包含assets目录，若没生效，检查.gitignore是否排除了该目录

4. 文件名大小写不匹配 #

服务器或本地环境可能区分大小写，比如配置里写的是otOARU_mJTlg-cover.webp，实际文件名是OTOaru_mJTlg-cover.webp，就会导致加载失败，严格匹配文件名大小写即可。

内容的提问来源于stack exchange，提问作者铁打的屁股蛋儿