在文章中加入图片

概述

本指南介绍三种在文章中添加图片的方法。推荐优先使用自动化工具，避免手动输入错误。

方法一：VS Code 自动插入（推荐）

操作方式

• 复制粘贴：从网页或文件管理器复制图片，在编辑器中粘贴
• 拖拽插入：将图片文件拖入编辑器，按提示按住 Shift 键

自动处理

编辑器会自动完成以下操作：

• 在 /src/assets/images/文章文件名/ 下创建图片副本
• 自动生成正确的引用语法：![alt text](../../assets/images/文章名/图片名)

💡 提示：

• 引用现有项目图片时，直接拖拽不会创建重复副本。
• 在插入图片后, 在光标处于 URL 时, 可以按 F2 修改文件名和路径

方法二：Front Matter CMS

功能

• 在正文插入图片：点击编辑器右上角 🖼️ , 然后选择图片
• 设置封面：在 FM 面板点击”添加您的封面”

方法三：手动管理（不推荐）

基本规则

• 图片放在 /src/assets/images/ 文件夹下
• 使用相对路径引用：../../assets/images/文章名/图片名
• 不要引用项目外的图片或网络链接

为什么不推荐？

手动操作容易出现路径错误、文件丢失等问题，而自动化工具既方便又可靠。

最佳实践

推荐做法：

• 优先使用 VS Code 自动插入
• 为图片添加有意义的 alt 文本
• 使用本地图片而非网络链接

避免做法：

• 手动输入复杂路径
• 引用项目外的图片文件