使用本地图片示例#

这篇文章展示了如何在博客中使用本地存储的图片。所有图片都存放在 public/images/ 目录下。

风景图片#

美丽的山景

这张图片使用了本地存储的风景照片。在 Markdown 中引用方式：

1
![美丽的山景](/images/landscape.jpg)

科技图片#

科技主题

科技风格的图片，适合技术类文章使用。

自然风光#

自然风光

大自然的美丽景色，适合旅游或自然主题的文章。

编程相关#

代码与编程

与编程相关的图片，适合技术博客使用。

如何添加你自己的图片#

第一步：准备图片文件#

将图片文件复制到 public/images/ 目录：

1
blog-astro/
2
└── public/
3
    └── images/
4
        ├── your-photo1.jpg
5
        ├── your-photo2.png
6
        └── your-photo3.webp

第二步：在文章中引用#

1
---
2
title: '我的文章'
3
image: '/images/your-photo1.jpg'
4
---
5

6
# 文章标题
7

8
![图片描述](/images/your-photo1.jpg)
9

10
![另一张图](/images/your-photo2.jpg)

图片路径说明#

/images/ 开头：表示 public/images/ 目录
首页有 /：表示从 public 目录开始
支持的格式：.jpg、.png、.webp、.gif、.svg

封面图设置#

在文章的 Frontmatter 中设置 image：

1
---
2
title: '文章标题'
3
description: '文章描述'
4
published: 2026-02-07
5
image: '/images/landscape.jpg'  # 封面图
6
---

封面图会显示在：

文章列表页的卡片上
文章详情页的顶部

图片优化建议#

文件大小：单张图片建议不超过 500KB
格式选择：
- 照片使用 .jpg 或 .webp
- 图标和插图使用 .png 或 .svg
尺寸：
- 封面图：1200x600 像素
- 文章内图片：宽度 800-1000 像素
命名规范：使用英文，避免空格和特殊字符

示例代码#

创建一个带有封面图和内容图片的文章：

1
---
2
title: '我的旅行日记'
3
description: '记录美好的旅行时光'
4
published: 2026-02-07
5
image: '/images/landscape.jpg'
6
---
7

8
# 我的旅行日记
9

10
今天去了美丽的山区旅行。
11

12
![山景](/images/landscape.jpg)
13

14
风景真是美不胜收！
15

16
![自然风光](/images/nature.jpg)
17

18
下次还要再来！