Markdown 图片（九）

9.图片

涵盖基础语法、alt 文本、尺寸控制、链接组合、路径管理及高级布局。

一、基础语法

![替代文字](图片路径)
![替代文字](图片路径 "图片标题")

结构分解：

  1. 感叹号 !
  2. 方括号 []：放置替代文字（alt）
  3. 圆括号 ()：放置图片 URL，可选标题（用引号包裹）

示例：

![RUNOOB 图标](https://static.jyshare.com/images/runoob-logo.png "RUNOOB")

二、图片路径

2.1 相对路径（推荐）

![项目截图](./images/screenshot.png)
![用户界面](../assets/ui-demo.jpg "UI演示")

2.2 绝对路径

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

2.3 网络图片

![网络图标](https://example.com/logo.png)

路径建议：

  • 优先使用相对路径，便于项目移植
  • 创建专用文件夹（如 images/​、assets/）
  • 使用有意义的文件名
  • 注意不同操作系统的路径分隔符差异

三、参考式图片链接

与参考式链接语法一致，适合重复使用同一图片 URL。

[RUNOOB][1]

[1]: https://static.jyshare.com/images/runoob-logo.png

四、alt 文本（替代文字）

作用：图片无法显示时的替代信息，对无障碍访问和 SEO 重要。

✅ 好的 alt 文本：

![苹果公司总部大楼外观，现代玻璃幕墙建筑](./images/headquarters.jpg)
![网站流量统计图表，显示过去六个月访问量上升](./charts/traffic.png)

❌ 应避免的 alt 文本：

![图片](image.jpg)       # 过于笼统
![](image.jpg)          # 完全没有 alt
![点击这里](image.jpg)   # 不描述图片内容

最佳实践：

  • 简洁且有描述性
  • 描述图片的主要内容和用途
  • 避免“图片”、“照片”等冗余词
  • 装饰性图片可使用空 alt：![](...)

五、控制图片尺寸与样式

HTML 方式

标准 Markdown 无法直接控制尺寸，需使用 <img> 标签。

5.1 固定尺寸

<img src="image.jpg" width="300" height="200">
<img src="image.jpg" width="50%">

5.2 响应式图片

<img src="image.jpg" style="max-width: 100%; height: auto;">

5.3 图片对齐

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

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

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

六、图片链接组合（可点击图片）

[![图片alt文本](图片URL)](链接URL)

示例：

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

常见应用：项目徽章、应用商店下载按钮。

[![Build Status](https://travis-ci.org/user/repo.svg?branch=master)](https://travis-ci.org/user/repo)
[![App Store](./images/app-store-badge.png)](https://apps.apple.com/app/your-app)

七、高级布局示例

7.1 图片画廊（Flex 布局）

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

7.2 表格布局（并排图片加说明）

| 移动端 | 桌面端 |
|:---:|:---:|
| ![移动界面](./mobile.png) | ![桌面界面](./desktop.png) |
| 响应式设计 | 大屏体验 |

7.3 功能展示模板

<table>
  <tr>
    <td align="center">
      <img src="./feature1.png" width="200"><br>
      <strong>智能识别</strong><br>
      <sub>AI驱动</sub>
    </td>
  </tr>
</table>

八、故障排除与性能优化

问题 解决方案
链接无法点击 检查 [文字](URL) 方括号与圆括号是否配对
图片无法显示 验证路径、文件名大小写、文件是否存在
图片过大 使用 HTML 控制尺寸或优化图片文件
需要在新区打开链接 使用 <a target="_blank"> 包围图片

性能建议：

  • 使用 WebP 格式优先，其次 PNG/JPEG
  • 使用适当的图片尺寸，避免在文档中直接缩放大图
  • 考虑使用图片压缩工具
  • 为不同设备准备不同尺寸（响应式）

总结速查表

用途 语法
基础图片 ​![alt](url)
带标题 ​![alt](url "title")
参考式图片 ​![alt][id]​ + [id]: url
可点击图片 ​[![alt](url)](target_url)
控制尺寸 html 或者 css
居中对齐 ​<div align="center"><img...></div>

核心原则：Markdown 专注内容，样式控制交给 HTML；始终提供有意义的 alt 文本；优先使用相对路径。