Markdown-08-图片

图片能让文档更加生动和易于理解。

Markdown 的图片语法简洁而灵活。

Markdown 图片语法格式如下：

![图片描述](图片路径)

![图片描述](图片路径 "图片标题")

• 开头一个感叹号 !
• 接着一个方括号，里面放上图片描述
• 接着一个普通括号，里面放上图片路径，最后还可以选择性地用引号包住图片标题。

相对路径示例：

![项目截图](./images/screenshot.png)

![用户界面](../assets/ui-demo.jpg "用户界面演示")

![图标](images/icon.svg "应用图标")

绝对路径示例：

![本地图片](/Users/username/Documents/image.png)

![系统截图](C:\Users\username\Pictures\screenshot.png)

路径使用建议：

• 推荐使用相对路径，便于项目移植
• 建议创建专门的图片文件夹（如 images/、assets/）
• 使用有意义的文件名，便于管理
• 注意路径分隔符在不同操作系统中的差异

直接引用网络图片：

![演示图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4)

![演示图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4 "演示图片")

效果：

当然，也可以像网址那样对图片网址使用变量：

这个链接用 1 作为网址变量 

![演示图片][1]

然后在文档的结尾为变量赋值（网址）

[1]: https://images.unsplash.com/photo-1506905925346-21bda4d32df4

效果：

这个链接用 1 作为网址变量

然后在文档的结尾为变量赋值（网址）

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签。

<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" width="50%">

效果：

使用 CDN 服务：

![Unsplash 图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4)

效果：

网络图片注意事项：

• 确保图片 URL 的稳定性和可访问性
• 注意图片的版权问题
• 考虑加载速度和网络环境
• 建议本地备份重要图片

描述的重要性

图片描述在图片无法显示时提供替代信息，同时对无障碍访问和 SEO 很重要：

好的 alt 文本示例：

![苹果公司总部大楼外观，现代玻璃幕墙建筑](./images/apple-headquarters.jpg)

![网站流量统计图表，显示过去六个月的访问量呈上升趋势](./charts/traffic-stats.png)

![用户登录界面，包含用户名和密码输入框](./screenshots/login-page.png)

避免的 alt 文本：

![图片](image.jpg)      // 太简单，没有描述性

![](image.jpg)         // 完全没有 alt 文本

![点击这里](image.jpg)  // 不描述图片内容

图片描述最佳实践：

• 简洁但有描述性
• 描述图片的主要内容和用途
• 避免使用"图片"、"照片"等冗余词汇
• 对于装饰性图片，可以使用空的图片描述
• 考虑上下文，提供有意义的信息

尺寸控制

标准 Markdown 不支持直接控制图片尺寸，但可以使用 HTML 标签。

使用 img 标签：

<img src="image.jpg" alt="描述文字" width="300" height="200">

<img src="image.jpg" alt="描述文字" width="50%">

<img src="image.jpg" alt="描述文字" style="width: 300px; height: auto;">

响应式图片：

<img src="image.jpg" alt="描述文字" style="max-width: 100%; height: auto;">

图片对齐：

• 左对齐（默认）：

<img src="image.jpg" alt="左对齐图片" style="float: left; margin-right: 20px;">

• 居中对齐：

<div align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</div>

• 右对齐：

<img src="image.jpg" alt="右对齐图片" style="float: right; margin-left: 20px;">

图片链接组合

将图片作为链接的可点击元素。

基本语法：

[![图片描述](图片路径)](链接路径)

实际示例：

[![GitHub项目截图](./images/project-screenshot.png)](https://github.com/username/project)

[![访问官网](https://example.com/logo.png)](https://example.com "点击访问官网")

常见应用场景：

项目徽章：

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

效果：

相对路径的优势

项目结构：

project/
├── README.md
├── docs/
│   ├── guide.md
│   └── images/
│       └── screenshot.png
└── assets/
    └── logo.png

在 README.md 中：

![Logo](./assets/logo.png)

在 docs/guide.md 中：

![Screenshot](./images/screenshot.png)

![Logo](../assets/logo.png)

路径规划建议：

• 在项目根目录创建统一的资源文件夹
• 使用描述性的文件夹名称
• 保持路径结构的一致性
• 考虑静态网站生成器的路径规则

居中和对齐

方法一：HTML + CSS

<div style="text-align: center;">
  <img src="image.jpg" alt="居中图片" style="max-width: 100%;">
</div>

方法二：使用 HTML 对齐属性

<p align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</p>

方法三：创建图片画廊

<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
  <img src="image1.jpg" alt="图片1" style="width: 30%; margin: 10px;">
  <img src="image2.jpg" alt="图片2" style="width: 30%; margin: 10px;">
  <img src="image3.jpg" alt="图片3" style="width: 30%; margin: 10px;">
</div>

实用的图片展示模板：

## 产品展示

### 主要功能
<table>
  <tr>
    <td align="center">
      <img src="./images/feature1.png" width="200" alt="功能1">
      <br>
      <strong>智能识别</strong>
      <br>
      <sub>AI驱动的图像识别技术</sub>
    </td>
    <td align="center">
      <img src="./images/feature2.png" width="200" alt="功能2">
      <br>
      <strong>快速处理</strong>
      <br>
      <sub>毫秒级响应速度</sub>
    </td>
  </tr>
</table>

### 界面预览
| 移动端 | 桌面端 |
|:---:|:---:|
| ![移动界面](./images/mobile.png) | ![桌面界面](./images/desktop.png) |
| 响应式设计，完美适配 | 大屏体验，功能齐全 |

性能优化建议：

• 优化图片大小和格式（WebP > PNG > JPG）
• 使用适当的图片尺寸，避免在网页中缩放大图
• 考虑使用图片压缩工具
• 为不同设备准备不同尺寸的图片

故障排除

常见问题及解决方案：

• 链接无法点击：检查语法格式，确保方括号和圆括号正确配对
• 图片无法显示：验证图片路径和文件存在性
• 图片过大：使用 HTML 控制尺寸或优化图片文件
• 链接在新窗口打开：使用 HTML <a target="_blank"> 标签