🖼️ 图片语法示例
本文档详细介绍纸鸢博客中支持的所有图片语法特性，包含完整的语法示例和效果展示
💡 提示：本文档中的所有语法示例均已在纸鸢博客中测试通过，可直接复制使用
🎯 基础图片语法
1️⃣ 简单图片
语法：
效果：
2️⃣ 带标题的图片
语法：
效果：
3️⃣ 使用相对路径
语法：
效果说明：
../表示上级目录./表示当前目录- 建议使用相对路径引用项目内的图片
4️⃣ 使用绝对路径
语法：
效果说明：
- 以
/开头的路径表示从网站根目录开始 - 也可以使用完整的 HTTP/HTTPS URL
🎨 图片与链接结合
5️⃣ 图片链接（点击跳转）
语法：
[](https://gl.baimu.live)效果：
点击图片将跳转到链接地址
6️⃣ 带标题的图片链接
语法：
[](https://gl.baimu.live "链接标题")效果：
📋 文档封面图
7️⃣ Frontmatter 中的封面设置
语法：
---
title: 文档标题
description: 文档描述
date: 2026-04-03
tags: 标签1、标签2
cover: /assets/shiroki.jpg
url: /custom-path
---说明：
cover字段用于设置文档的封面图片- 封面图片会显示在文档列表和文档头部
- 建议使用 16:9 比例，宽度 800px 以上
🌟 图片最佳实践
8️⃣ 图片格式建议
| 格式 | 适用场景 | 优点 |
|---|---|---|
| AVIF | 照片、复杂图像 | 压缩率高，质量好 |
| WebP | 通用场景 | 兼容性好，体积小 |
| PNG | 图标、透明背景 | 无损压缩，支持透明 |
| JPG/JPEG | 照片 | 兼容性好，体积小 |
| SVG | 图标、Logo | 矢量，无限缩放 |
| GIF | 简单动画 | 支持动画 |
9️⃣ 图片尺寸建议
| 用途 | 建议尺寸 | 说明 |
| :--- | :--- | :--- |
| 文档封面 | 1200 x 675 (16:9) | 高清显示 |
| 文章配图 | 800 x 450 (16:9) | 适中大小 |
| 图标/Logo | 64 x 64 或 128 x 128 | 正方形 |
| 全屏背景 | 1920 x 1080 | 高清背景 |🔟 图片路径组织
建议的项目图片目录结构：
public/
├── assets/
│ ├── images/ # 通用图片
│ ├── covers/ # 封面图片
│ ├── icons/ # 图标
│ └── avatars/ # 头像
└── shiroki/ # 自定义图片分类💡 图片使用技巧
1️⃣ 使用合适的 alt 文本
<!-- 好的示例 - 描述性 alt 文本 -->
<!-- 不好的示例 - 无意义的 alt 文本 -->
2️⃣ 优化图片加载
- 使用现代格式（AVIF、WebP）减少文件大小
- 为重要图片设置合适的尺寸
- 考虑使用懒加载提升页面性能
🚀 图片懒加载
1️⃣ 懒加载效果说明
纸鸢博客已内置图片懒加载功能，无需额外配置
特性：
- ✨ 自动懒加载：图片进入视口时才加载
- 🫥 模糊占位：加载前显示模糊占位效果
- 🎭 平滑过渡：从模糊到清晰的渐变动画
- 📱 骨架屏：加载中的闪光动画效果
效果展示：
向下滚动查看懒加载效果，图片会在进入视口时自动加载：
💡 提示：懒加载会自动应用于文档中的所有图片，提升页面加载性能和用户体验
2️⃣ 懒加载状态展示
以下是一个一直在懒加载状态的示例，用于展示加载中的动画效果：
效果（始终保持加载中状态）：
🎨 观察要点：
- 图片显示为模糊的占位符状态
- 背景有闪光动画（shimmer 效果）
- 模拟了图片加载中的真实体验
3️⃣ 图片加载失败示例
以下是一个图片加载失败的示例，展示加载失败时的动画效果：
效果（模拟加载失败的图片）：
🎨 失败状态说明：
- 原图片隐藏（透明且不可见）
- 保留动画效果（方块跳跃动画）
- 添加淡红色背景和红色虚线边框提示失败
- 读者知道图片加载失败，但仍有视觉反馈
3️⃣ 图片与文字排版
这是一段文字，后面跟着一张图片：
图片下方的继续文字...4️⃣ 引用中的图片
> 这是一段引用
>
> 
>
> 引用继续...效果：
这是一段引用
引用中的图片示例
引用继续…
📝 示例文档模板
---
title: 文档标题
description: 文档描述
date: 2026-04-03
tags: 标签1、标签2
cover: /assets/shiroki.jpg
url: /custom-path
---
# 文档标题
## 图片展示
## 带链接的图片
[](https://gl.baimu.live)🕊️ 白木 原创开发 🔗 gl.baimu.live