文章目录
一、为什么你的图片总是显示失败？
先来个灵魂拷问：明明代码写对了，为什么图片就是不显示？（别慌！90%的新手都踩过这个坑）这个看似简单的功能，实际操作时却让无数人抓狂。今天就带你彻底搞懂这个"小功能"背后的"大学问"！
二、基础语法三件套
1. 标准写法（必学！）
- 替代文本：图片加载失败时显示的文字（千万别写"此处应有图片"这种废话！）
- 图片路径：可以是本地路径或网络地址（后面会重点讲）
- 悬停标题：鼠标悬停时显示的文字（选填但建议加）
2. 网络图片直链（适合临时用）
⚠️警告：这种方式有三大风险：
- 原图删除就凉凉
- 加载速度依赖网络
- 可能遇到防盗链（突然变裂图）
3. 本地图片引用（推荐方案）
（超级重要）路径符号：
./当前目录../上级目录/根目录（慎用！不同系统可能解析不同）
三、高级玩家必备技巧
1. 自适应图片大小（HTML大法）
<img src="diagram.jpg" alt="架构图" width="50%" style="margin: 0 auto;"/>
适用场景：需要精确控制尺寸时（但会破坏Markdown的简洁性）
2. 带链接的图片（点击跳转）
[](https://example.com)
效果：点击图片跳转到指定链接（常用于产品文档）
3. 图床方案对比（选型指南）
| 服务商 | 免费额度 | CDN加速 | 管理后台 | 风险提示 |
|---|---|---|---|---|
| GitHub | 无限 | ❌ | ❌ | 需公开仓库 |
| SM.MS | 5GB/月 | ✅ | ✅ | 国内访问略慢 |
| Imgur | 1000张/月 | ✅ | ✅ | 需科学上网 |
| 七牛云 | 10GB/月 | ✅ | ✅ | 需备案域名 |
四、实战避坑指南
案例1：路径引发的血案
错误示范：
 ❌
正确姿势：
- 使用相对路径
- 路径中不要有中文和空格
- 统一使用
/代替\
案例2：图床防盗链破解
当遇到![403 Forbidden]时：
- 在URL前加代理前缀（不推荐）
- 下载图片重新上传到自己图床（推荐）
- 联系图片所有者获取授权（最规范）
案例3：协作开发时的路径规范
推荐项目结构：
project/
├── docs/
│ └── user-guide.md
└── assets/
└── images/
└── workflow.png
引用方式：
五、编辑器差异大全
1. VS Code
- 需要安装Markdown Preview Enhanced插件
- 绝对路径基准：当前工作区根目录
- 快捷键：
Ctrl+Shift+V预览
2. Typora
- 直接拖拽图片自动生成代码
- 支持粘贴剪贴板图片（自动保存到指定目录）
- 设置路径：
偏好设置 -> 图像
3. Obsidian
- 双链笔记的独特玩法：
![[内部笔记]]引用笔记中的图片 - 建议开启"自动将图片保存到附件文件夹"
- 移动端同步需配合云存储
六、终极解决方案
给懒人朋友的万能公式：
- 在文档同级创建
images文件夹 - 所有图片扔进去
- 统一使用
格式 - 项目打包时记得带上图片文件夹！
最后送大家一个自检清单：
- 路径是否使用了相对地址
- 图片格式是否为jpg/png/gif
- 文件名是否包含特殊字符
- 图床图片是否设置公开访问
- 协作时图片是否随文档一起提交
下次遇到图片显示问题，按照这个清单排查，保准药到病除！（亲测有效）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
