图片存放位置
在你的Hugo博客中，所有图片都应该放在 static/images/ 目录下：
1
2
3
4
5
6
7
8
| static/
├── images/
│ ├── posts/ # 文章相关图片
│ ├── logos/ # 品牌logo
│ ├── screenshots/ # 软件截图
│ └── icons/ # 图标素材
├── logo.svg # 网站logo
└── favicon.svg # 网站图标
|
创建图片目录
让我们为这篇文章创建一个专门的图片目录：
1
| mkdir -p static/images/posts/2025-07-30-image-guide/
|
实际使用示例
1. 封面图片
在文章头部添加封面图：
1
2
3
4
| ---
title: "文章标题"
image: "/images/posts/2025-07-30-image-guide/cover.jpg"
---
|
2. 内容图片
在正文中插入图片：
1
2
3
| 
|
3. 图片对齐
使用HTML实现更复杂的布局：
1
2
3
4
| <div style="text-align: center;">
<img src="/images/posts/2025-07-30-image-guide/centered-image.png" alt="居中图片" width="600">
<p style="font-style: italic; color: #666;">图片说明文字</p>
</div>
|
图片优化建议
尺寸规范
- 封面图: 1200x630px (推荐)
- 内容图: 800x600px (推荐)
- 截图: 保持原始比例，宽度不超过1200px
文件命名
1
2
3
4
5
6
7
8
9
| # 好的命名
hugo-blog-homepage.png
vscode-setup-guide.jpg
cloudflare-deployment-steps.png
# 不好的命名
IMG_001.jpg
截图.png
image1.jpg
|
压缩优化
使用以下工具压缩图片：
在线工具:
- TinyPNG.com (PNG/JPG压缩)
- Squoosh.app (Google开发)
本地工具:
- ImageOptim (Mac)
- Caesium (Windows)
完整示例
假设你有一张博客首页的截图，使用步骤如下：
保存图片：
1
2
| static/images/posts/2025-07-30-image-guide/
└── hugo-blog-screenshot.png
|
在文章中使用：
1
| 
|
添加图片说明：
1
2
3
| 
*图：我的Hugo博客首页，展示了最新的文章列表和导航菜单*
|
常见问题
Q: 图片不显示怎么办？
A: 检查以下几点：
- 图片路径是否正确（以
/ 开头） - 文件名是否拼写正确
- 文件是否真的存在于该路径
- 使用
hugo server -D 本地预览
Q: 如何添加图片说明？
A: 使用Markdown语法：
1
2
3
| 
*这是图片的说明文字*
|
Q: 如何控制图片大小？
A: 使用HTML：
1
| <img src="/images/posts/2025-07-30-image-guide/demo.png" alt="演示" width="500" height="300">
|
实际测试
你可以立即测试图片功能：
创建目录：
1
| mkdir -p static/images/posts/2025-07-30-image-guide/
|
添加测试图片：
将任何图片重命名为 test.jpg 放入该目录
在文章中引用：
1
| 
|
本地预览：
总结
记住这些要点：
- ✅ 图片放在
static/images/ 目录下 - ✅ 使用绝对路径
/images/... 引用 - ✅ 保持文件名描述性和简洁
- ✅ 压缩优化图片大小
- ✅ 为重要图片添加alt文字
现在可以开始在博客中优雅地使用图片了！