在Markdown文件中插入图片的方法
本文介绍下在Markdown文件中插入图片的方法。
一、使用 Markdown 语法
1.1 语法概述
这是最简单和常用的方法。 可以直接在 Markdown 文件中使用以下语法插入图片:
- 图片描述: 对图片的简短描述,这对于屏幕阅读器用户和搜索引擎优化 (SEO) 很有帮助。 虽然不是必需的,但强烈建议添加。
- 图片路径: 图片的路径,可以是相对路径或绝对路径。
1.2 相对路径示例
假设你的图片文件 image.jpg 位于你的博文所在的目录下的 images 文件夹中,那么图片路径就是 images/image.jpg。
1.3 绝对路径示例
假设你的网站域名是 example.com,图片位于 /images/image.jpg,那么图片路径就是 https://example.com/images/image.jpg。
二、使用 HTML 标签
- src: 图片的路径。
- alt: 图片的描述,类似于 Markdown 语法中的图片描述。
- title: 图片的标题,当鼠标悬停在图片上时会显示。
- width 和 height: 指定图片的宽度和高度。
三、图片路径的几种选择
- 本地路径: 将图片文件放在你的博文所在的目录或其子目录下,然后使用相对路径引用。这是最常用的方法。 建议在博文目录下创建一个 images 文件夹来存放图片。
- 公共路径: 将图片文件放在你的 Hexo 项目的 source/images 目录下,然后使用 /images/图片文件名 引用。这样,无论你的博文位于哪个目录,都可以使用相同的路径引用图片。
- 外部 URL: 使用图片的外部 URL,例如图床提供的 URL。
四、最佳实践
- 使用相对路径: 尽可能使用相对路径,这样方便迁移和管理你的博客。
- 优化图片大小: 在上传图片之前,尽量压缩图片大小,以提高网站加载速度。
- 添加 alt 属性: 始终添加 alt 属性,提供图片的描述,这对于 SEO 和可访问性非常重要。
- 组织图片文件: 建议将图片文件组织到文件夹中,例如在每篇博文的目录下创建一个 images 文件夹。
五、示例
假设你的博文文件名为 my-post.md,图片文件名为 my-image.jpg。
- 在 source/_posts/my-post 目录下创建一个名为 images 的文件夹。
- 将 my-image.jpg 复制到 source/_posts/my-post/images 目录下。
- 在 my-post.md 文件中使用以下代码插入图片:
在Markdown文件中插入图片的方法
You need to set
install_url
to use ShareThis. Please set it in _config.yml
.