图片使用指南：如何在博客中添加图片

图片存放位置

在你的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

![图片描述](/images/posts/2025-07-30-image-guide/example.png)

![Hugo博客首页](/images/posts/2025-07-30-image-guide/hugo-homepage.png)

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

压缩优化

使用以下工具压缩图片：

1. 在线工具:

   • TinyPNG.com (PNG/JPG压缩)
   • Squoosh.app (Google开发)

2. 本地工具:

   • ImageOptim (Mac)
   • Caesium (Windows)

完整示例

假设你有一张博客首页的截图，使用步骤如下：

1. 保存图片：

   1 2	static/images/posts/2025-07-30-image-guide/ └── hugo-blog-screenshot.png

2. 在文章中使用：

   1	

3. 添加图片说明：

   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. 创建目录：

   1	mkdir -p static/images/posts/2025-07-30-image-guide/

2. 添加测试图片： 将任何图片重命名为 test.jpg 放入该目录

3. 在文章中引用：

   1	

4. 本地预览：

   1	hugo server -D

总结

记住这些要点：

• ✅ 图片放在 static/images/ 目录下
• ✅ 使用绝对路径 /images/... 引用
• ✅ 保持文件名描述性和简洁
• ✅ 压缩优化图片大小
• ✅ 为重要图片添加alt文字

现在可以开始在博客中优雅地使用图片了！