图片语法 #

概述 #

图片语法与链接类似，只需在链接语法前添加感叹号 !。

基本语法 #

行内图片 #

语法：![替代文本](图片地址)

markdown

![Markdown Logo](https://markdown-here.com/img/icon256.png)

带标题的图片 #

语法：![替代文本](图片地址 "标题")

markdown

![Markdown Logo](https://markdown-here.com/img/icon256.png "Markdown 标志")

鼠标悬停时显示"Markdown 标志"。

引用式图片 #

与引用链接类似：

markdown

![Markdown Logo][logo]

[logo]: https://markdown-here.com/img/icon256.png "Markdown 标志"

图片语法对照 #

类型	语法
行内图片	`![alt](url)`
带标题图片	`![alt](url "title")`
引用图片	`![alt][ref]`

替代文本 #

作用 #

图片无法加载时显示
屏幕阅读器读取（无障碍访问）
SEO 优化

示例 #

markdown

![一只可爱的猫咪](cat.jpg)

![产品截图：用户登录界面](screenshot.png)

![数据图表：2024年销售趋势](chart.png)

替代文本最佳实践 #

markdown

好的：
![红色按钮，显示"提交"文字](button.png)

不好的：
![图片](button.png)
![按钮](button.png)

图片路径 #

网络图片 #

markdown

![网络图片](https://example.com/image.png)

本地图片 #

markdown

![本地图片](./images/photo.png)
![上级目录图片](../assets/image.png)

Base64 图片 #

markdown

![Base64图片](data:image/png;base64,iVBORw0KGgo...)

图片尺寸 #

Markdown 原生不支持设置图片尺寸，需要使用 HTML：

指定宽度 #

markdown

<img src="image.png" width="300">

指定高度 #

markdown

<img src="image.png" height="200">

同时指定宽高 #

markdown

<img src="image.png" width="300" height="200">

按比例缩放 #

markdown

<img src="image.png" width="50%">

图片对齐 #

使用 HTML 控制对齐：

居中对齐 #

markdown

<p align="center">
  <img src="image.png" width="300">
</p>

或：

markdown

<div align="center">
  <img src="image.png" width="300">
</div>

左对齐 #

markdown

<img align="left" src="image.png" width="200">
文字会环绕在图片右侧...

右对齐 #

markdown

<img align="right" src="image.png" width="200">
文字会环绕在图片左侧...

图片链接 #

将图片包裹在链接中：

markdown

[![GitHub Logo](github.png)](https://github.com)

点击图片跳转到链接。

示例：徽章链接 #

markdown

[![npm version](https://img.shields.io/npm/v/react)](https://www.npmjs.com/package/react)
[![Build Status](https://travis-ci.org/facebook/react.svg)](https://travis-ci.org/facebook/react)

图片与文字 #

图片后换行 #

markdown

![图片](image.png)

图片后的文字

图片与文字同行 #

markdown

文字内容 ![图片](image.png) 继续文字

常见问题 #

问题1：图片不显示 #

检查：

URL 是否正确
图片是否存在
是否有访问权限

问题2：图片路径错误 #

markdown

错误：
![图片](/images/photo.png)    ← 路径不存在

正确：
![图片](./assets/photo.png)   ← 正确的相对路径

问题3：特殊字符 #

markdown

图片名有空格：
![图片](./images/my photo.png)     ← 错误

解决方法：
![图片](./images/my%20photo.png)   ← URL 编码
![图片](./images/my-photo.png)     ← 重命名文件

图片管理建议 #

目录结构 #

text

project/
├── docs/
│   ├── images/
│   │   ├── logo.png
│   │   ├── screenshot-1.png
│   │   └── screenshot-2.png
│   └── README.md

命名规范 #

markdown

推荐：
![用户登录界面](./images/user-login.png)
![API架构图](./images/api-architecture.png)

不推荐：
![图片](./images/1.png)
![截图](./images/screenshot.png)

实际应用 #

Logo 展示 #

markdown

# 项目名称

<p align="center">
  <img src="./logo.png" width="200">
</p>

项目描述...

截图展示 #

markdown

## 界面预览

### 首页

![首页截图](./screenshots/home.png)

### 设置页面

![设置页面截图](./screenshots/settings.png)

图表展示 #

markdown

## 数据分析

![销售趋势图](./charts/sales-trend.png)

*图：2024年销售趋势*

徽章展示 #

markdown

# 项目名称

![npm](https://img.shields.io/npm/v/package)
![license](https://img.shields.io/npm/l/package)
![downloads](https://img.shields.io/npm/dm/package)

图片优化建议 #

1. 压缩图片 #

使用工具压缩图片，减少文件大小。

2. 选择合适格式 #

格式	适用场景
PNG	图标、截图、透明图
JPG	照片、复杂图像
GIF	动画
WebP	现代格式，体积小

3. 使用 CDN #

markdown

![图片](https://cdn.example.com/images/photo.png)

4. 懒加载 #

使用 HTML 属性：

markdown

<img src="image.png" loading="lazy">

下一步 #

继续学习链接与图片进阶！