如何在Hugo中配置图片路径，实现本地与站点双端正常显示

• 方案一：全局统一图片目录（推荐）
  把所有图片集中放到项目根目录下的/static/images/文件夹里，Markdown里用根相对路径引用：

  ![图片描述](/images/2022-11-10-17-33-49.png)
  

  原理：Hugo编译时会直接把/static目录下的内容复制到网站根目录，部署后图片访问路径完全匹配引用路径；本地VSCode只要将项目根设为工作区，也能识别这个根相对路径正常显示。

• 方案二：单篇文章绑定图片目录
  若想让图片和对应文章关联管理，把文章改成页面捆绑结构：将posts/xxx.md重命名为posts/xxx/index.md，然后把该文章的图片放到posts/xxx/目录下，引用时用相对路径：

  ![图片描述](2022-11-10-17-33-49.png)
  

  这种方式本地VSCode能直接识别相对路径，Hugo编译后也会自动处理图片路径，适合文章专属图片的管理。

• 原方法失效原因
  你之前把图片放在/content/posts/images/下，Hugo编译content目录时会生成对应的站点结构，图片最终访问路径会变成/posts/images/xxx.png，但你引用的是/content/posts/images/xxx.png，部署后这个路径不存在，所以无法显示。

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