在文章中加入图片

加入图片的方法有多种:

• 由 VS Code 提供

  • 复制网页上的图片, 或者复制图片文件, 在正文部分粘贴
  • 或者直接拖进来(拖进编辑区后按提示按住 Shift)

  之后, assets/image/文章文件名 文件夹下会创建图片的副本, 正文中会创建对这个图片的引用. 类似这样:

  ![alt text](../../assets/images/测试文章3/瑞恩瑞云制造-列表图片.2gSXU2kn_1kUSvo.webp)

  对图片的引用由两部分组成, 前面的 [alt text] 是替代文本, 可以被浏览器的朗读功能读取. 正确添加图片描述可以让文章有更好的可访问性. 后面是图片路径, 其中的 ../ 表示上一级目录, 这里引用到图片的方式是回到上一级的上一级, 然后向下到 assets/images/测试文章3/ 内找到图片.

  还可以在左侧切到资源管理器面板, 将已经放进项目的其他图片拖进来或复制进来, 此时会直接使用对图片的引用, 不会创建新的副本

• 由 Front Matter CMS 提供

  • 点编辑区右上角的🖼️, 可以选择项目中已有的图片. 也可以在这个界面将外部图片拖进项目
  • 在左侧的 FM 面板, 点 Add your 封面, 可以给项目添加封面. 如果想将一个外部图片放进项目, 可以先在正文部分粘贴一下, 然后将正文部分的引用删掉, 这样就不用手动给文章创建文件夹了

你总是可以手动输入文件路径来引用项目中的图片, 以及直接将图片放进项目文件夹, 但需要遵守规则:

• 将图片统一放在 assets/images 文件夹下, 避免影响其他代码文件
• 建议将图片放在按每篇文章命名的文件夹下, 以方便检索
• 不要引用项目文件夹之外的图片. 这样做可以在本地预览时看到图片, 但这些图片是不会上传到远程仓库的. 可以在项目内给图片创建副本.
• markdown 中允许通过 URL 引用网络图片, 但实际测试中, 云主机那边构建时, 获取网络图片时有概率出问题, 而且本地图片也更加可靠, 可以防止一段时间后链接失效

总之, 让编辑器帮忙插入图片既方便又可靠, 不建议手动输入