外观
GitHub 图片(README)不显示?一文解决
一个很典型的现象:GitHub 页面文字正常,图片全裂——README 里的截图、徽章(badge)、头像都加载不出来。这几乎总是图片专用域名被污染或被墙导致的。
为什么单独图片挂了
GitHub 的文字页面和图片走不同域名:
| 内容 | 域名 |
|---|---|
| 网页/代码 | github.com |
| 头像 | avatars.githubusercontent.com |
| README 里的图片(代理后) | camo.githubusercontent.com |
| 上传的图片附件 | *.githubusercontent.com |
| 徽章 shields.io | img.shields.io 等 |
所以当主站能开、但上面这些图片域名被污染时,就会只有文字、图片裂开。
方法一:补全 Hosts 里的图片域名(最对症)
如果你已经改过 hosts 但图片还是不显示,多半是漏加了图片域名。补上这些:
text
185.199.108.133 avatars.githubusercontent.com
185.199.108.133 camo.githubusercontent.com
185.199.108.133 raw.githubusercontent.com
185.199.108.133 media.githubusercontent.com
185.199.108.133 user-images.githubusercontent.comIP 会变,请查当前较优 IP。完整的 hosts 配置与自动更新见 👉 Hosts 加速专文。
改完刷新 DNS 缓存并重启浏览器:
bash
# Windows
ipconfig /flushdns方法二:更换加密 DNS
图片域名被 DNS 污染时,换成公共加密 DNS 常常直接解决:
- 系统 DNS 改为
1.1.1.1/8.8.8.8; - 或在浏览器开启 安全 DNS(DoH):Chrome → 设置 → 隐私和安全 → 安全 → 使用安全 DNS。
方法三:走代理
如果是连接层被干扰(解析正确也加载不出),让浏览器走 代理 是根本解。配好后刷新页面,图片即恢复。
方法四:徽章(badge)不显示
README 顶部的 build/version 徽章来自 shields.io 等第三方,和 GitHub 无关:
- 这些域名同样可能被墙,走代理即可恢复;
- 如果你是仓库作者,想让访客更稳定看到徽章,可考虑用 GitHub 官方的 badge 或把关键状态截图放进 README。
方法五:自己写 README 时,让图片更稳
如果你在维护仓库、希望访客(尤其国内)能稳定看到图片:
markdown
<!-- 用 jsDelivr 引用仓库内图片,国内更稳 -->
比直接用 raw.githubusercontent.com 的可达性更好。
排查速查
| 现象 | 原因 | 解决 |
|---|---|---|
| 文字正常,所有图裂 | 图片域名被污染 | 方法一 / 二 |
| 只有头像不显示 | avatars. 域名被污染 | 方法一 |
| 只有徽章不显示 | shields.io 被墙 | 方法三 |
| 改了 hosts 仍不显示 | 漏加图片域名 | 方法一补全 |
| 时好时坏 | DNS 缓存/连接抖动 | 方法二 + 重启浏览器 |
小结
- 图片单独挂,九成是图片专用域名的问题,而不是 GitHub 挂了。
- 用 hosts 的话务必覆盖
avatars/camo/githubusercontent系列域名。 - 想彻底不折腾,代理 一劳永逸。
- 作为作者写 README,用 jsDelivr 引图能让更多访客正常看到。
本文仅供技术学习与研究,请遵守所在国家/地区法律法规。