博客图片使用演示
文章信息
发布日期：2025年11月7日
分类：技术 / 教程
标签：#图片 #Markdown #示例
📸 图片展示示例
这篇文章展示了博客中各种图片的使用方式。
1️⃣ 基础图片
最简单的图片引用：
图1：这是一张封面图
2️⃣ 指定大小的图片
使用 HTML 标签可以控制图片大小：
图2：代码截图示例（宽度 600px）
3️⃣ 居中显示
图3：博客横幅图片（居中显示）
4️⃣ 并排显示多张图片
使用 Flexbox 布局
图4-5：并排显示的两张图片
5️⃣ 网格布局
技术文章配图
生活随笔配图
工作感悟配图
图6-8：网格布局展示
6️⃣ 带边框和阴影的图片
图9：带边框和阴影效果
7️⃣ 响应式图片
图10：根据屏幕大小显示不同图片
8️⃣ 图片对比展示
示例 A 这是第一张图片的说明 | 示例 B 这是第二张图片的说明 |
9️⃣ 圆角图片
图11-13：圆角效果的图片
🔟 卡片式布局
📚 使用的图片清单
当前示例中使用的图片：
| 位置 | 图片路径 | 大小 | 用途 |
|---|---|---|---|
| tech/ | /images/tech/vitepress-cover.jpg | 71KB | 技术文章封面 |
| tech/ | /images/tech/code-screenshot.jpg | 52KB | 代码截图 |
| life/ | /images/life/reading-photo.jpg | 76KB | 生活配图 |
| life/ | /images/life/travel-photo.jpg | 63KB | 旅行照片 |
| work/ | /images/work/team-meeting.jpg | 41KB | 团队会议 |
| common/ | /images/common/blog-banner.jpg | 98KB | 博客横幅 |
总大小：约 400KB
💡 使用建议
✅ 推荐做法
优化图片大小
- 使用 TinyPNG 压缩
- 控制在 200KB 以内
提供替代文本
markdown按分类组织
- tech/ - 技术文章
- life/ - 生活随笔
- work/ - 工作感悟
统一命名规范
article-name-01.jpg cover-image.jpg screenshot-demo.png
📏 尺寸建议
- 封面图：1200 x 630 px
- 配图：800 x 600 px
- 缩略图：400 x 300 px
- 图标：64 x 64 px 或 128 x 128 px
🎨 样式技巧
图片圆角
html
<img src="/images/example.jpg" style="border-radius: 12px;">图片阴影
html
<img src="/images/example.jpg" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">图片边框
html
<img src="/images/example.jpg" style="border: 2px solid #e5e7eb;">组合效果
html
<img src="/images/example.jpg"
style="border-radius: 8px;
border: 2px solid #e5e7eb;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);">🚀 下一步
现在你已经看到了各种图片使用方式，可以：
- 将自己的图片放到
public/images/对应目录 - 在文章中使用这些语法引用图片
- 根据需要调整样式和布局
详细文档请查看 IMAGE_GUIDE.md
让图片为你的文章增色！ 📸