Markdown 图片嵌入指南 📸

Markdown Banner

🌟 简介

本指南将介绍在 Markdown 文档中嵌入图片的多种方法，包括基础语法、带链接的图片以及可调整大小的图片。

🖼️ 一、基础图片语法

语法格式：

1	![图片替代文本](图片URL)

示例代码：

1	![我的图片名称](https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg)

效果演示：

以下是《基础图片语法》示例：

我的图片名称

🔗 二、带链接的图片语法

语法格式：

1	[![图片替代文本](图片URL)](链接URL)

示例代码：

1	[![示例图片](https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg)](https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg)

效果演示：

以下是《带链接的图片语法》示例：

💡 点击图片可以跳转到指定链接

📐 三、调整图像大小的语法

使用 HTML 标签控制图片尺寸：

语法格式：

1	<img src="图片URL" alt="替代文本" width="宽度" height="高度">

示例代码：

1	<img src="https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg" alt="示例图片" width="300" height="200">

效果演示：

以下是《链接图像并调整图像大小的语法》示例：

示例图片

🎨 四、更多图片控制技巧

1. 使用 CSS 样式控制图片

1	<img src="https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg" alt="示例图片" style="width: 50%; border: 2px solid #98FB98; border-radius: 10px;">

2. 居中显示图片

1
2
3

<div align="center">
  <img src="https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg" alt="居中图片" width="300">
</div>

3. 添加图片标题

<figure>
  <img src="https://pic3.zhimg.com/v2-52e3d25b08972370aeefe92a202e5ba3_r.jpg" alt="示例图片" width="300">
  <figcaption>这是一个美丽的示例图片</figcaption>
</figure>

💡 五、最佳实践建议

使用描述性替代文本：为所有图片提供有意义的 alt 文本，提高可访问性
优化图片大小：确保图片文件大小适中，提高加载速度
使用可靠图床：选择稳定的图片托管服务，避免链接失效
保持一致性：在整个文档中使用统一的图片样式和大小
考虑响应式设计：使用百分比宽度而不是固定像素，适应不同屏幕尺寸

🛠️ 六、常用图床服务

服务名称	特点	免费额度
Imgur	无需注册，简单易用	完全免费
GitHub	与代码仓库集成	免费，但有仓库大小限制
Cloudinary	提供图片优化和转换	免费套餐有限额
阿里云 OSS	国内访问速度快	按量付费，有免费额度