简介

这是一个测试文章,演示如何在分类目录结构下引用图片。

正文

已确认可以显示的图片引用方式

直接使用img标签(已验证可行):

测试图片1

更多HTML标签引用方式测试

1. 带宽高的img标签

测试图片1

2. 使用figure标签包裹

测试图片1
图片1的说明文字

3. 添加样式的img标签

测试图片1

4. 使用HTML5 picture标签

测试图片1

引用public目录下的静态资源

全局头像

其他图片引用尝试

1. 相对路径引用(简单形式)

测试图片1

2. 使用绝对路径

测试图片1

3. 使用Hexo资源文件夹方式

4. 使用完整URL

测试图片1

5. 使用缩略URL路径

测试图片1

6. 直接引用生成后的路径

测试图片1

图片引用说明

在分类目录结构下,图片路径如下:

1
2
3
4
5
6
source/
└── _posts/
└── 技术笔记/ # 分类目录
├── test-category-post2.md # 文章文件
└── test-category-post2/ # 文章图片目录
└── 1.jpg # 图片文件

目前已经确认以下方式可以正确显示图片:

  1. 使用HTML的img标签:<img src="1.jpg" alt="测试图片1">