图片短代码完整功能测试

1. 基本用法

简单图片（无标题）

带标题的图片

2. 尺寸变体测试

小尺寸图片

默认尺寸图片

大尺寸图片

全宽图片

3. 对齐方式测试

左对齐图片

这是一段文字，用来测试左对齐图片的效果。图片应该浮动在左侧，文字围绕在右侧。这样可以创建更好的版面布局效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

右对齐图片

这是一段文字，用来测试右对齐图片的效果。图片应该浮动在右侧，文字围绕在左侧。这样可以创建更好的版面布局效果。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

4. 图片组合展示

三张小图片并排

5. 不同主题的图片

风景图片

抽象图片

城市图片

6. 功能特性说明

图片短代码支持的功能：

智能路径处理：
- 自动识别URL（http://或https://开头）
- 优先使用 static/images/ 下的本地图片
- 支持相对路径和绝对路径
参数支持：
- 第1个参数：图片文件名或URL（必需）
- 第2个参数：alt文本（可选，默认为文件名）
- 第3个参数：标题（可选）
- 第4个参数：CSS类（可选）
样式变体：
- image-small：小尺寸图片（最大300px）
- image-large：大尺寸图片（最大800px）
- image-full：全宽图片
- image-left：左对齐图片
- image-right：右对齐图片
交互效果：
- 悬停时图片轻微放大（1.02倍）
- 鼠标指针变为放大镜
- 支持灯箱效果（与现有图片查看器集成）
响应式设计：
- 在移动设备上，左右对齐的图片会变为居中显示
- 图片自动适应屏幕宽度
- 保持图片比例
可访问性：
- 自动添加 loading="lazy" 属性
- 支持alt文本和title属性
- 语义化的figure和figcaption结构
主题适配：
- 支持暗色主题
- 图片容器背景和边框颜色自动适配
- 标题文字颜色自动适配

7. 使用示例

<!-- 基本用法 -->

        
            

<!-- 带标题 -->

        
            图片标题

<!-- 使用CSS类 -->

        
            图片标题

<!-- 使用外部图片 -->

    
        外部图片标题

<!-- 使用本地图片（优先从static/images/加载） -->

        
            本地图片标题

8. 注意事项

文件路径：
- 本地图片应放在 static/images/ 目录下
- 文件名应包含扩展名（如 .jpg, .png, .gif 等）
- 外部图片URL应该是完整的HTTP/HTTPS地址
性能优化：
- 所有图片都添加了 loading="lazy" 属性
- 建议使用适当尺寸的图片
- 外部图片建议使用CDN服务
可访问性：
- 建议为所有图片提供有意义的alt文本
- 标题应该简洁明了
- 避免使用纯装饰性图片
响应式设计：
- 在移动设备上，浮动图片会自动变为居中显示
- 建议测试不同屏幕尺寸下的显示效果

Markdown 编辑器