在 Hugo 中插入图片主要有以下几种方法，根据图片存储位置和需求选择最适合的方式：

方法 1：使用 Markdown 基础语法（推荐）

![图片描述](图片路径)
  • 图片路径规则：
    • 图片放在 static/images/ 目录 → 路径：/images/photo.jpg
    • 图片放在文章同级目录（需设置）→ 路径：photo.jpg

方法 2：使用 Hugo 的 figure Shortcode（带标题/样式）

{{ <figure src="/images/sunset.jpg" title="夕阳美景" alt="日落描述" width="600" > }}

这里的双{ 和<分开后就显示不正确了。

  • 优势：自动添加响应式处理、标题、缩放等效果
  • 参数：src（必填）、title、alt、width、height、class等

📂 图片存储位置方案

方案 A：全局图片（全站通用）

  1. 将图片放入 /static/images/ 目录
    （例：/static/images/logo.png）
  2. 在文章中引用：
    ![网站Logo](/images/logo.png)

方案 B：文章专属图片（推荐）

  1. 在 content/posts/ 下创建 文章名.md + 同名文件夹：
    content/
└── posts/
    └── my-post/
        ├── index.md     # 文章内容
        └── banner.jpg  # 专属图片
  2. 在 index.md 中直接引用：
    ![文章横幅](banner.jpg)

方案 C：使用 Page Resources（高级）

在文章 Front Matter 中声明资源：

---
resources:
  - src: "gallery/*.png"  # 匹配目录下所有png
    name: "gallery-:counter"
---

模板中调用：

{{ range .Resources.ByType "image" }}
  <img src="{{ .RelPermalink }}" alt="{{ .Name }}">
{{ end }}

⚙️ 配置优化（可选）

在 config.toml 中添加：

[imaging]
resampleFilter = "CatmullRom"
quality = 85
anchor = "smart"

💡 实用技巧

  1. 响应式图片：
    {{ < figure src="/img.jpg" sizes="(max-width: 600px) 480px, 800px" >}}
  2. 图片处理（需开启 image processing）：
    {{ $original := resources.Get "/images/photo.jpg" }}
{{ $resized := $original.Resize "600x" }}
<img src="{{ $resized.RelPermalink }}">
  3. 懒加载：
    <img data-src="/image.jpg" class="lazyload">

❌ 常见错误

  1. 路径错误：确保路径开头有 /（如 /images/xx.jpg）
  2. 目录不存在：检查图片是否在 static/ 目录下
  3. 未清理缓存：修改后运行 hugo --gc 清理缓存

✅ 最佳实践建议：

  • 普通文章 → 使用 方案B（文章专属图片）
  • 全站通用图片 → 使用 方案A（全局图片）
  • 需要高级效果 → 使用 figure shortcode

完成配置后，启动本地服务器测试：

hugo server -D