在多平台同时使用Markdown文件并确保图片完整(详细教程)-CSDN博客

本文链接：https://blog.csdn.net/haishiqiguai/article/details/148002325

关键因素

要在多个平台上同时使用Markdown文件并确保图片完整可用，关键是要解决图片存储和路径引用的问题

方案1：使用图床（推荐）

将图片上传到图床(用于存储和托管图片的在线服务)，然后在 .md 文件中使用绝对路径引用图片。这样无论在哪打开 .md 文件，图片都能正常显示。

步骤

上传到图床（任选其一）：
· PicGo (支持GitHub，阿里云，七牛云等)
· imgchr（免费）
· GitHub + CDN（适合开发者）
在.md文件中引用图片:

优点

· 只要图床不关闭图片永久可用
· 适用于GitHub，博客，Typora，VS Code 等任何支持Markdown的平台

缺点

· 免费图床可能有储存限制或访问速度的问题
· 如果图床失效，图片会丢失（建议使用GitHub或自建图床）

方法2：使用GitHub存储图片（适合开发者）

GitHub 可以作为免费图床，搭配CDN（如jsDelivr）快速访问

步骤

在Github上创建仓库
将图片上传到仓库
获取图片的CDN链接

https://cdn.jsdelivr.net/gh/GitHub/GitHub用户名/仓库名@main/图片路径

优点

· 免费，稳定，适合长期使用
· 适合博客，技术文档等

缺点

· 需要GitHub账号，上传麻烦

方法3：Base64嵌入图片（适合少量图片）

将图片转换为Base64编码，直接写入 .md 文件

步骤

使用在线工具转换：
· Base64 Image Encoder
在 .md 文件中嵌套

优点

· 图片和 .md 文件一体，不会丢失

缺点

· 文件体积大，加载变慢
· 不适合大量图片

详细介绍方法 2：使用 GitHub 存储图片

所有方案都适用，这里就详细讲一下方案二

GitHub 不仅可以托管代码，还能作为免费图床使用，搭配 jsDelivr CDN 加速访问，适合长期存储图片并用于 Markdown 文件

适用场景

· 技术文档（如GitHub，Git Book，Docsify）
· 个人博客（如Hexo，Hugo）
· 需要稳定，免费图片存储的 Markdown 文件

步骤1：准备 GitHub 仓库

1.1创建新仓库

登录 GitHub，点击右上角 + — New repository
输入仓库名（如my-images），选择public（私有仓库无法通过CDN访问）
勾选Add a README file（可选），点击Create repository

1.2 上传图片到仓库

· 方式1：网页直接上传

进入仓库——点击Add file——Upload files
拖拽图片到指定区域，点击Commit changes

方式2：Git 命令上传

git clone https://github.com/你的用户名/my-images.git
cd my-images
mkdir images  # 可选：创建分类文件夹
cp /你的本地图片路径/*.jpg ./images/
git add .
git commit -m "添加图片"
git push

步骤2：获取图片的 CDN 链接

GitHub 原生链接速度较慢，推荐使用 jsDelivr CDN 加速：

https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/图片路径

· 示例
如果图片的地址是：

https://github.com/username/my-images/blob/main/images/pic1.jpg

对应的 CDN 链接为：

https://cdn.jsdelivr.net/gh/username/my-images@main/images/pic1.jpg

步骤 3：在 Markdown 中引用图片

在 .md 文件中直接使用 CDN 链接：

![图片描述](https://cdn.jsdelivr.net/gh/username/my-images@main/images/pic1.jpg)

注意事项

图片命名规范
·避免中文和特殊符号（如 !@#），建议用英文、数字或 - 连接。
·示例：good-name.jpg（✅） vs 图片1.jpg（❌ 可能编码错误）。
分支选择
默认用 @main（GitHub 默认主分支），如果是旧仓库可能是 @master。
更新图片
上传新图片后，CDN 可能需要几分钟生效（jsDelivr 有缓存）。
仓库公开性
必须使用 Public 仓库，私有仓库无法通过 CDN 访问。

常见问题

为什么 CDN 链接显示 404

· 原因 1：仓库是 Private（必须改为 Public）
· 原因 2：分支名错误（如误用 master 代替 main）
· 原因 3：图片路径大小写不匹配（GitHub 区分大小写）

CDN 缓存多久更新

· jsDelivr 缓存约 10分钟~2小时。上传新图片后，若未生效可强制刷新

https://cdn.jsdelivr.net/gh/用户名/仓库@分支/图片路径?raw=true

替代方案

· 如果不想用 GitHub：
· 国内用户可尝试 Gitee（码云），但需注意 CDN 限制。
· 自建图床（如 Cloudflare + R2）。

总结

GitHub + jsDelivr CDN 是最稳定、免费的 Markdown 图片托管方案，尤其适合开发者。按上述步骤操作后，你的.md文件在任何平台都能正常显示图片！