0.2 轻松搞定文章图片插入#

上一篇文章，我们带着大家解锁了 Hugo 快速建站的技能，还展示了如何将简单的 Markdown 文件变身精美网页。不少小伙伴反馈实操超顺利，纷纷留言问：“文章里想加图片，咋整？” 别着急！这篇干货，手把手教你在 Hugo 文章中完美插入图片！

在 Hugo 中插入图片有多种方式，我们可以根据图片存储位置和实际需求，挑选最适合的方法。接下来，就为大家详细拆解这些实用技巧👇

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

用 Markdown 基础语法插入图片，简单直接，对新手特别友好！语法格式如下：

![图片描述](图片路径)

这里的 “图片描述” 是为了方便搜索引擎和视障用户理解图片内容；“图片路径” 则根据图片存放位置而变化：

• 放在static/images/目录：路径写/images/photo.jpg，就像给图片设置了一个 “全局门牌号”，所有文章都能通过这个路径找到它。

• 放在文章同级目录：直接写photo.jpg，相当于图片和文章住在同一间 “小房子” 里，引用时更便捷。

方法 2：Hugo 的（美化神器）#

如果你希望图片展示更精致，比如自动适配屏幕、添加标题和描述，那 Hugo 绝对是你的 “秘密武器

参数详解：

• src：必填项，指定图片路径；
• title：给图片加个漂亮标题；
• alt：图片加载失败时的替代文字；
• width、height：设置图片尺寸；
• class：自定义 CSS 样式类。

** **

📂 图片存储位置方案#

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

1. 将图片放入 /static/images/ 目录 （例：/static/images/logo.png）

2. 在文章中引用：

   ![网站Logo](/images/logo.png)

这种方式适合网站 Logo、导航栏图标等会在多个页面出现的图片。在文章里引用时，直接写，超方便！#

#

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

1. 在 content/posts/ 下创建 文章名.md + 同名文件夹：

content/└── posts/    └── my-post/        ├── index.md     # 文章内容        └── banner.jpg   # 专属图片

在index.md中引用时，直接写：

![文章横幅](banner.jpg)

这样图片和文章紧密绑定，管理起来井井有条，普通文章用它准没错！

总结一下：

✅ 最佳实践建议：

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

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

hugo server -D

打开浏览器，输入提示的网址，见证你的图文并茂的 Hugo 文章诞生吧！