Obsidian 学习笔记

Appearance

图片与附件管理 ​

概述 ​

Obsidian 支持在笔记中嵌入各种类型的附件，包括：

类型支持格式用途
图片PNG, JPG, GIF, SVG, WebP截图、插图、照片
音频MP3, WAV, M4A, OGG录音、音乐
视频MP4, WebM, MOV视频片段
文档PDF, DOCX, XLSX参考资料
其他任意文件备份、存储

嵌入图片 ​

粘贴图片 ​

最简单的方式是直接粘贴：

  1. 复制图片到剪贴板
  2. 在笔记中按 Ctrl/Cmd + V
  3. 图片自动保存并嵌入

拖拽图片 ​

将图片文件直接拖入编辑器：

  • 拖入后自动复制到仓库
  • 自动生成 Markdown 链接

Markdown 语法 ​

markdown
![图片描述](图片路径)

# 示例
![产品截图](attachments/screenshot.png)
![Logo](../images/logo.svg)

内部链接语法 ​

markdown
![[@图片名称]]

# 示例
![[screenshot.png]]
![[diagram.svg|300]]  # 设置宽度
![[photo.jpg|200x150]]  # 设置宽高

图片显示选项 ​

调整大小 ​

markdown
# 设置宽度（保持比例）
![[image.png|300]]

# 设置宽度和高度
![[image.png|200x150]]

# 百分比
使用 CSS 片段设置百分比

图片位置 ​

使用 CSS 类控制对齐：

markdown
![[image.png|center]]
![[image.png|left]]
![[image.png|right]]

需要添加 CSS 片段：

css
/* 图片对齐 */
img[alt*="center"] {
  display: block;
  margin: 0 auto;
}

img[alt*="left"] {
  float: left;
  margin-right: 1em;
}

img[alt*="right"] {
  float: right;
  margin-left: 1em;
}

图片说明 ​

markdown
# 方法一：Markdown 语法
![这是图片说明](image.png)

# 方法二：HTML 标签
<figure>
  <img src="image.png" alt="图片">
  <figcaption>图片说明文字</figcaption>
</figure>

附件存储策略 ​

默认存储位置 ​

默认情况下，附件保存在仓库根目录。

自定义附件文件夹 ​

  1. 打开设置 → 文件与链接
  2. 找到「附件默认存放路径」
  3. 设置文件夹路径（如 attachments/）

推荐目录结构 ​

vault/
├── attachments/           # 全局附件文件夹
│   ├── images/           # 图片
│   ├── audio/            # 音频
│   ├── video/            # 视频
│   └── documents/        # PDF 等文档
├── projects/
│   └── project-a/
│       └── assets/       # 项目专属附件
└── notes/

按项目组织 ​

对于大型项目，建议：

yaml
项目附件策略:
  项目专属:
    - 在项目文件夹下创建 assets/ 目录
    - 使用相对路径引用
    
  共享资源:
    - 放在全局 attachments/ 目录
    - 使用根路径引用

图片管理插件 ​

推荐插件 ​

插件名称功能描述
Image Toolkit图片预览、缩放、旋转
Paste image rename自动重命名粘贴的图片
Ozan Image in Editor Plugin编辑器内图片预览
Imgur Plugin上传图片到 Imgur
Custom Attachment Location自定义附件命名规则
Attachment Management附件管理增强

Paste image rename 配置 ​

自动重命名粘贴的图片：

yaml
设置:
  图片命名格式: "{{fileName}}-{{date}}-{{number}}"
  
示例:
  笔记: 项目计划.md
  图片: 项目计划-20240115-001.png

Image Toolkit 功能 ​

  • 图片预览放大
  • 图片旋转翻转
  • 图片裁剪
  • 图片导出

图片优化 ​

压缩图片 ​

大图片会影响同步和加载速度，建议压缩：

yaml
压缩建议:
  截图:
    - 使用 PNG 格式
    - 分辨率不超过 1920px
    
  照片:
    - 使用 JPG 格式
    - 质量 80% 左右
    - 适当降低分辨率
    
  网页图片:
    - 使用 WebP 格式
    - 更小的文件体积

压缩工具 ​

工具平台说明
TinyPNG网页在线压缩 PNG/JPG
Squoosh网页Google 出品
ImageOptimmacOS本地压缩
PNGGauntletWindows本地压缩

批量优化 ​

bash
# 使用 ImageMagick 批量调整大小
mogrify -resize 1920x1080\> *.png

# 批量转换为 WebP
for f in *.png; do cwebp "$f" -o "${f%.png}.webp"; done

音频和视频 ​

嵌入音频 ​

markdown
# 内部链接
![[recording.mp3]]

# HTML 音频播放器
<audio controls src="audio.mp3"></audio>

嵌入视频 ​

markdown
# 内部链接
![[video.mp4]]

# HTML 视频播放器
<video controls width="500">
  <source src="video.mp4" type="video/mp4">
</video>

嵌入在线视频 ​

markdown
# YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

# Bilibili
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID" width="560" height="315"></iframe>

PDF 管理 ​

嵌入 PDF ​

markdown
# 链接到 PDF
[[document.pdf]]

# 嵌入 PDF（显示内容）
![[document.pdf]]

# 嵌入 PDF 特定页面
![[document.pdf#page=5]]

# 嵌入 PDF 并设置高度
![[document.pdf#height=600]]

PDF 标注 ​

使用 PDF 标注插件：

  1. 打开 PDF 文件
  2. 进行高亮、注释
  3. 标注自动保存到笔记

详见 PDF 标注功能。

网页嵌入 ​

iframe 嵌入 ​

markdown
# 嵌入网页
<iframe src="https://example.com" width="100%" height="400"></iframe>

# 嵌入 Google 地图
<iframe src="https://www.google.com/maps/embed?..."></iframe>

网页截图 ​

对于需要保存的网页内容：

  1. 使用浏览器截图功能
  2. 或使用 Full Web Page Screenshot 插件
  3. 将截图保存为附件

附件清理 ​

查找未使用的附件 ​

使用 Dataview 查询：

dataview
LIST
FROM "attachments"
WHERE !file.inlinks

清理脚本 ​

python
# 查找未引用的图片（Python 脚本）
import os
import re

vault_path = "/path/to/vault"
attachments_path = os.path.join(vault_path, "attachments")

# 获取所有图片
images = set()
for f in os.listdir(attachments_path):
    if f.endswith(('.png', '.jpg', '.gif', '.svg')):
        images.add(f)

# 查找引用
referenced = set()
for root, dirs, files in os.walk(vault_path):
    for f in files:
        if f.endswith('.md'):
            with open(os.path.join(root, f)) as file:
                content = file.read()
                for img in images:
                    if img in content:
                        referenced.add(img)

# 输出未引用的图片
unused = images - referenced
for img in unused:
    print(img)

使用插件清理 ​

  • Clear Unused Images：自动清理未使用的图片
  • Find Unlinked Files：查找未链接的文件

最佳实践 ​

命名规范 ​

yaml
推荐命名:
  使用英文: 避免路径编码问题
  包含日期: 方便排序
  描述性名称: 知道内容是什么

示例:
  - 20240115-product-screenshot.png
  - project-alpha-diagram.svg
  - meeting-notes-audio.mp3

文件夹组织 ​

yaml
组织建议:
  小仓库:
    - 单一 attachments/ 文件夹
    - 按类型分子文件夹
  
  大仓库:
    - 全局共享资源集中管理
    - 项目附件分散到各项目
  
  团队协作:
    - 统一命名规范
    - 定期清理未使用附件

备份策略 ​

yaml
备份建议:
  图片资源:
    - 使用 Git 管理
    - 或单独备份到云存储
  
  大文件:
    - 使用 Git LFS
    - 或存储在外部服务（图床）

常见问题 ​

图片无法显示？ ​

  1. 检查路径是否正确
  2. 检查文件名大小写
  3. 检查文件是否存在于仓库中
  4. 检查是否有特殊字符

图片太大怎么办？ ​

  1. 压缩图片后再插入
  2. 使用 CSS 限制显示大小
  3. 考虑使用图床存储

如何迁移图片？ ​

使用插件「Attachment Management」：

  1. 打开插件设置
  2. 选择「迁移所有附件」
  3. 设置新的存储路径
  4. 执行迁移

下一步 ​

最后更新：2026年2月22日编辑此页反馈问题