Markdown 图片

Markdown 图片最全速查表（2025 版，一篇彻底吃透）

需求	写法（直接复制粘贴）	渲染效果说明	最佳使用场景 / 平台支持
最基础图片		alt文本（图片坏了时显示）	所有平台都支持
		Grok
指定宽高（推荐！）	 或 HTML 方式	控制尺寸不失真	Typora、语雀、Obsidian、掘金、Hexo 全支持
	 <img src="url" width="400"/>	Grok
带链接（点图跳转）	[](大图/网页地址)	可点击的图片	README、博客、个人主页神器
	[](https://github.com/你的用户名)	我的头像
居中显示（最优雅）	<center></center> 或 <img src="url" style="display:block;margin:auto">	图片自动居中	语雀、Typora、Obsidian、掘金、VuePress 全支持
加标题/说明文字		鼠标悬停显示标题	技术文档、图床、博客
圆角/阴影/边框（高级）	<img src="url" width="300" style="border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.15)">	美观卡片风格	语雀、Typora、Obsidian、Notion、掘金
本地相对路径	 	本地图片	GitHub、Obsidian、MkDocs、Hexo 项目必备
网络图床（最快）	推荐图床（2025 年还活着的）： • jsDelivr + GitHub • 路过图床 • SM.MS • 语雀自带图床	外链图片	博客、掘金、知乎、微信公众号

2025 年最常用的 8 种写法（直接抄就美炸）

1. 基础居中图（推荐写法）
<center>![Grok 4 架构图](https://x.ai/assets/grok4.png =600x)</center>

2. 可点击放大（技术博客最爱）
[![点击查看大图](https://x.ai/grok-small.jpg)](https://x.ai/grok-hd.jpg)

3. 带说明文字 + 圆角阴影（高端感拉满）
<img src="https://x.ai/grok.png" width="380" style="border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.2); display:block; margin:20px auto">

4. 三连图（横向排列）
<div style="display:flex; justify-content:space-around; gap:20px; flex-wrap:wrap">
  <img src="1.jpg" width="300">
  <img src="2.jpg" width="300">
  <img src="3.jpg" width="300">
</div>

5. 带编号说明（教程专用）
**图 1：系统架构图**  
![系统架构图](./images/architecture.png =800x)

6. emoji + 图片组合（个人主页）
<div align="center">
  <img src="https://avatars.githubusercontent.com/u/12345678" width="180" style="border-radius:50%">
  <br><br>
  <b>Hi, 我是帅哥/美女程序员</b> 
</div>

各平台支持情况（2025 年最新）

功能	GitHub	语雀	Typora	Obsidian	掘金	微信公众号	Notion
基础图片	✅	✅	✅	✅	✅	✅	✅
=宽度x高度 语法	❌	✅	✅	✅	✅	❌	❌
HTML 标签	✅	✅	✅	✅	✅	✅	✅
居中 / 圆角 / 阴影	部分	✅	✅	✅	✅	部分	✅
点图放大	✅	✅	✅	✅	✅	❌	✅

终极结论：
日常写笔记/博客/文档，用好这三招就天下无敌：

1. 普通图：![alt](url =600x)
2. 居中图：<center>!... </center>
3. 高端图：直接上 <img src="" width="" style="...">

想要我直接发一套「2025 最火的 12 种图片排版模板」吗？
包含：个人主页头图、三连图、流程图、带说明卡片、暗黑适配…
复制粘贴即拥有顶级审美，随时说一声就发给你～