Markdown图片

图片让您的内容更具吸引力，有助于说明您的观点。Markdown提供了添加图片的简单语法，尽管有时您可能需要HTML来实现更高级的功能。

基本图片语法

Markdown中图片的基本语法类似于链接，但在开头有一个感叹号： 

![替代文本](图片网址.jpg)
![本地图片](./images/照片.jpg)
![外部图片](https://example.com/图片.jpg)

带标题的图片

您可以添加标题，当用户将鼠标悬停在图片上时显示： 

![替代文本](图片.jpg "图片标题")

替代文本最佳实践

替代文本对可访问性和SEO至关重要：

1. 描述性

❌ 无用： 

![图片](照片.jpg)
![图片](pic.png)

✅ 描述性： 

![女性在咖啡厅用笔记本电脑编程](编程-咖啡厅.jpg)
![显示2020年至2024年销售增长的条形图](销售图表.png)

2. 保持简洁

❌ 太长： 

![这是一张显示一个人在看起来像现代办公环境中的计算机前工作的图片，有白色墙壁和大窗户](办公室.jpg)

✅ 简洁： 

![人在现代办公室用电脑工作](办公室.jpg)

3. 不要包含"图片"或"照片"

❌ 冗余： 

![一张狗在公园玩耍的图片](狗.jpg)

✅ 直接： 

![狗在公园玩耍](狗.jpg)

引用式图片

像链接一样，您可以对图片使用引用式语法： 

![替代文本][图片引用]  

[图片引用]: 图片.jpg "可选标题"

示例

这是我们的标志：![公司标志][logo]

这是一个截图：![应用截图][screenshot]

[logo]: /images/logo.png "我的公司标志"
[screenshot]: /images/app.png "应用仪表板截图"

图片路径和URL

本地图片

![本地图片](./images/照片.jpg)
![相对路径](../assets/图标.png)
![绝对路径](/public/images/横幅.jpg)

外部图片

![外部图片](https://example.com/图片.jpg)
![Unsplash照片](https://images.unsplash.com/photo-123/照片.jpg)

常见模式

带说明的图片

![会议室中的团队会议](会议.jpg)
*图1：讨论项目里程碑的每周团队会议*

前后对比图片

## 之前
![旧网站设计](旧设计.png)

## 之后
![新网站设计](新设计.png)

分步说明

1. 点击设置图标
   ![右上角的设置图标](设置图标.png)

2. 选择"账户设置"
   ![账户设置菜单选项](账户菜单.png)

3. 更新您的个人资料信息
   ![带可编辑字段的个人资料表单](个人资料表单.png)

图片画廊

## 项目截图

![首页](首页.png) ![仪表板](仪表板.png) ![设置](设置.png)

图片故障排除

常见问题

  1. 图片不显示：检查文件路径和文件名

  2. 破损图片图标：验证图片URL是否可访问
  3. 图片太大：调整大小或压缩图片
  4. 格式错误：确保浏览器支持图片格式

测试图片

  • •
    在Markdown编辑器中预览

  • •
    在不同浏览器中检查
  • •
    在移动设备上验证
  • •
    用慢速网络连接测试

高级技巧

图片链接

结合图片和链接： 

[![点击查看大图](缩略图.jpg)](全尺寸.jpg)

图片是增强Markdown文档的强大方式。明智地使用它们来支持您的内容并改善用户体验！

需要在内容中强调文本吗？接下来学习删除线格式。