565 字
3 分钟
如何在博客中使用图片
如何在博客中使用图片
在 Markdown 中插入图片非常简单，有多种方式可以选择。
方法一：使用网络图片
直接使用图片的 URL：
效果如下：
方法二：使用本地图片
第一步：将图片放到 public 目录
将图片文件放在 public/ 目录下，例如：
public/ ├── images/ │ └── my-photo.jpg └── favicon.svg第二步：在 Markdown 中引用
注意：public 目录下的文件可以直接用 / 开头的路径引用。
方法三：使用 heroImage（封面图）
在文章的 Frontmatter 中设置 image：
---title: '文章标题'image: '/images/cover.jpg'---这样会在文章顶部显示一张大图作为封面。
方法四：使用 HTML（更多控制）
如果需要对图片进行更多控制，可以使用 HTML：
<img src="/images/my-photo.jpg" alt="图片描述" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);" width="600"/>实用技巧
1. 响应式图片
使用百分比宽度：
<img src="/images/my-photo.jpg" alt="描述" style="width: 100%;" />2. 带链接的图片
点击图片可以跳转到指定地址：
[](https://example.com)3. 图片并排
使用 HTML 表格或者 flexbox 布局可以让图片并排显示。
4. 图片说明
可以在图片下方添加说明文字：
*图：这是图片的说明文字*推荐的图片资源网站
如果需要免费图片，可以使用这些网站：
- Unsplash：https://unsplash.com/ - 高质量免费照片
- Pexels：https://pexels.com/ - 免费图片和视频
- Pixabay：https://pixabay.com/ - 免费图片、插图、矢量图
- Picsum：https://picsum.photos/ - 随机占位图片
示例：使用网络图片
下面是一个使用 Unsplash 的示例：
图：来自 Unsplash 的美丽风景
注意事项
- 图片大小：建议优化图片大小，避免影响加载速度
- 图片格式：推荐使用 WebP 格式（更小的体积，更好的质量）
- Alt 文本：记得添加图片描述，提高可访问性
- 版权：使用网络图片时注意版权问题
总结
在 Astro 博客中使用图片非常简单：
- ✅ 网络图片：直接使用 URL
- ✅ 本地图片：放在
public/目录 - ✅ 封面图：使用
image字段 - ✅ 高级控制：使用 HTML
快去给文章添加漂亮的图片吧！
如何在博客中使用图片
https://fuwari.vercel.app/posts/如何在博客中使用图片/