在Markdown文件中插入图片的方法

本文介绍下在Markdown文件中插入图片的方法。

一、使用 Markdown 语法

1.1 语法概述

这是最简单和常用的方法。 可以直接在 Markdown 文件中使用以下语法插入图片:

1
![图片描述](图片路径)
  • 图片描述: 对图片的简短描述,这对于屏幕阅读器用户和搜索引擎优化 (SEO) 很有帮助。 虽然不是必需的,但强烈建议添加。
  • 图片路径: 图片的路径,可以是相对路径或绝对路径。

1.2 相对路径示例

假设你的图片文件 image.jpg 位于你的博文所在的目录下的 images 文件夹中,那么图片路径就是 images/image.jpg。

1
![我的图片](images/image.jpg)

1.3 绝对路径示例

假设你的网站域名是 example.com,图片位于 /images/image.jpg,那么图片路径就是 https://example.com/images/image.jpg。

1
![我的图片](https://example.com/images/image.jpg)

二、使用 HTML 标签

也可以直接使用 HTML 的 标签插入图片:

1
<img src="图片路径" alt="图片描述" title="图片标题" width="宽度" height="高度">
  • src: 图片的路径。
  • alt: 图片的描述,类似于 Markdown 语法中的图片描述。
  • title: 图片的标题,当鼠标悬停在图片上时会显示。
  • width 和 height: 指定图片的宽度和高度。

三、图片路径的几种选择

  • 本地路径: 将图片文件放在你的博文所在的目录或其子目录下,然后使用相对路径引用。这是最常用的方法。 建议在博文目录下创建一个 images 文件夹来存放图片。
  • 公共路径: 将图片文件放在你的 Hexo 项目的 source/images 目录下,然后使用 /images/图片文件名 引用。这样,无论你的博文位于哪个目录,都可以使用相同的路径引用图片。
  • 外部 URL: 使用图片的外部 URL,例如图床提供的 URL。

四、最佳实践

  • 使用相对路径: 尽可能使用相对路径,这样方便迁移和管理你的博客。
  • 优化图片大小: 在上传图片之前,尽量压缩图片大小,以提高网站加载速度。
  • 添加 alt 属性: 始终添加 alt 属性,提供图片的描述,这对于 SEO 和可访问性非常重要。
  • 组织图片文件: 建议将图片文件组织到文件夹中,例如在每篇博文的目录下创建一个 images 文件夹。

五、示例

假设你的博文文件名为 my-post.md,图片文件名为 my-image.jpg。

  1. 在 source/_posts/my-post 目录下创建一个名为 images 的文件夹。
  2. 将 my-image.jpg 复制到 source/_posts/my-post/images 目录下。
  3. 在 my-post.md 文件中使用以下代码插入图片:
1
![我的图片](images/my-image.jpg)

在Markdown文件中插入图片的方法

http://example.com/2025/01/25/insert-picture/

作者

洪文杰

发布于

2025-01-25

更新于

2025-01-24

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

评论

You forgot to set the shortname for Disqus. Please set it in _config.yml.
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.