图片使用示例

这个页面展示如何在 Quartz 中使用图片。

---

图片存放位置

content/
├── assets/
│   └── images/
│       ├── my-image.png      ← 图片放在这里
│       └── screenshot.jpg
└── notes/
    └── image-test.md         ← 笔记文件

---

使用方式

方式 1: 相对路径（推荐）

![图片描述](../assets/images/my-image.png)

方式 2: 绝对路径

![图片描述](/assets/images/my-image.png)

方式 3: 网络图片

![图片描述](https://example.com/image.png)

---

图片示例

本地图片（需要您自己添加）

假设您在 content/assets/images/ 目录中有一张图片：

![我的图片](../assets/images/my-photo.png)

网络图片（示例）

---

图片语法

基本语法

![替代文字](图片路径)

带标题的图片

![替代文字](图片路径 "图片标题")

图片链接

[![替代文字](图片路径)](链接地址)

调整图片大小（HTML 方式）

<img src="图片路径" alt="替代文字" width="300">

---

在 Obsidian 中使用图片

1. 复制图片到 Obsidian

在 Obsidian 中：

1. 复制图片到剪贴板
2. 在笔记中粘贴
3. Obsidian 自动保存到附件文件夹

2. 使用 Obsidian 的语法

![[图片文件名.png]]

3. Quartz 会自动转换

Quartz 会将 Obsidian 的图片语法转换为标准 Markdown。

---

图片最佳实践

1. 使用有意义的文件名

![Python 学习笔记](../assets/images/python-learning-notes.png)
# 而不是
![图片1](../assets/images/img_001.png)

2. 添加替代文字

![一个显示 Python 代码的截图](../assets/images/python-code.png)
# 替代文字对 SEO 和无障碍访问很重要

3. 压缩图片

• 使用工具压缩图片（如 TinyPNG）
• 保持合理的文件大小
• 考虑使用 WebP 格式

4. 组织图片目录

assets/
└── images/
    ├── blog/           ← 博客文章的图片
    ├── notes/          ← 笔记的图片
    └── projects/       ← 项目文档的图片

---

测试图片

添加您自己的图片

1. 将图片复制到 content/assets/images/ 目录
2. 在笔记中使用相对路径引用：

![我的图片](../assets/images/my-image.png)

3. 推送到 GitHub
4. 查看网站效果

---

总结

图片类型	语法	示例
本地图片		
网络图片		
Obsidian 语法	![[文件名]]	![[photo.png]]

Quartz 完美支持各种图片语法！