GitHub图片加载不出来解决方案(超详细图文教程)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
.cn 域名,1个 12个月
简介: GitHub图片加载不出来解决方案(超详细图文教程)

GitHub图片加载不出来解决方案(超详细图文教程)


强烈推荐一个大神的人工智能的教程:http://www.captainai.net/zhanghan


前言


最近在访问GitHub时发现所有涉及到图片都加载失败,使人感觉极度不适;不将就是发现的源动力;有了之前《WordPress网站访问慢解决方案(超详细图文教程)》经验这次解决起来就顺利许多,下面是解决方案。

优化前:

  • 所有图片类型文件加载失败

优化后:

  • 所有图片类型文件正常加载


学完本教程你能得到什么


  • 排查网站加载资源失败解决思路
  • 使用软件获取网页数据进行格式化处理
  • 一颗不断探索的心
  • 一套可实时可落地的解决问题的套路


解决方案流程图


  • 流程图

2a26c8ccf41b2ed96fe573b5653bd0e4_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


问题&解决方案&验证


  • 问题(访问github,头像等图片加载失败)


f3ead6ae46325c5b685c5c6afb0fdb05_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 定位问题(图片资源域名访问不通)


  • 在google浏览器按F12,指定头像,找到头像url地址


6eeb386388f2c1b029c6e6c81587a495_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 在cmd中 通过ping命令检查网络是通的,结果如下:


//check头像资源域名
ping avatars.githubusercontent.com
正在 Ping github.map.fastly.net [151.101.228.133] 具有 32 字节的数据:
来自 151.101.228.133 的回复: 字节=32 时间=175ms TTL=48
来自 151.101.228.133 的回复: 字节=32 时间=154ms TTL=48
来自 151.101.228.133 的回复: 字节=32 时间=154ms TTL=48
来自 151.101.228.133 的回复: 字节=32 时间=153ms TTL=48



f87867674d7e3893ba58a986789f1b67_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 可以看出是解析DNS出问题如下:


域名 现在DNS解析对应ip 实际应该对应ip
avatars.githubusercontent.com 151.101.228.133 199.232.96.133


  • 解决步骤


  • 在本机hosts(windows的hosts文件目录 C:\Windows\System32\drivers\etc\hosts)文件中增加头像域名和正确ip映射关系并保存


199.232.96.133 avatars.githubusercontent.com


ebf79bcca7d36f570b2ab60a72b821b7_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 在cmd中执行命令刷新本机DNS缓存


ipconfig /flushdns


202102060037367.png


  • 进行验证,再次刷新github,发现头像可以正常加载,一下心情美丽许多


fcd96d397c14780a1f8b9b7cae6c0da5_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 当浏览项目时,发现有些项目中的图片还是加载失败


  • 再次通过google浏览器F12定位图片URL


5dd98e48e1d0991a0a1dbb501fc78f1f_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 项目中的图片URL和头像URL对比;发现两者URL的二级域名一致,但是三级域名不同,又浏览一些项目发现每个项目中的文件地址中的三级域名都有可能不同


头像域名 项目文件域名1 项目文件域名2 项目文件域名N
avatars.githubusercontent.com camo.githubusercontent.com raw.githubusercontent.com


  • 第一直觉解决方案是:hosts中通过 * 全匹配二级域名去解决如下,不过实验以及查资料发现不hosts文件不支持这种规则


//在hosts中用通配符来匹配二级域名下三级域名---不支持
199.232.96.133 *.githubusercontent.com
//在hosts中这样配置 只对githubusercontent.com 而对 avatars.githubusercontent.com 这些三级域名不生效
199.232.96.133 githubusercontent.com


  • 程序猿的第一反应既然通配符这种形式行不通那就进行遍历;先在此贴出最终遍历后的hosts文件,大家可以直接用;下面会讲解如何获得内容


199.232.96.133 scoopraw.githubusercontent.com
199.232.96.133 avators.githubusercontent.com
199.232.96.133 releases.githubusercontent.com
199.232.96.133 2021-01-29-----2021-01-31github-releases.githubusercontent.com
199.232.96.133 github-releases.githubusercontent.com
199.232.96.133 avaters.githubusercontent.com
199.232.96.133 ocame.githubusercontent.com
199.232.96.133 github.comraw.githubusercontent.com
199.232.96.133 vatars5.githubusercontent.com
199.232.96.133 cano.githubusercontent.com
199.232.96.133 vatars3.githubusercontent.com
199.232.96.133 usr-image.githubusercontent.com
199.232.96.133 war.githubusercontent.com
199.232.96.133 avatar6.githubusercontent.com
199.232.96.133 avatar7.githubusercontent.com
199.232.96.133 clound.githubusercontent.com
199.232.96.133 r-images.githubusercontent.com
199.232.96.133 2017-12-14-----2020-12-22raw.githubusercontent.com
199.232.96.133 raww.githubusercontent.com
199.232.96.133 avastar0.githubusercontent.com
199.232.96.133 ccraw.githubusercontent.com
199.232.96.133 1h3.githubusercontent.com
199.232.96.133 came.githubusercontent.com
199.232.96.133 marketplace-images.githubusercontent.com
199.232.96.133 desktep.githubusercontent.com
199.232.96.133 eaw.githubusercontent.com
199.232.96.133 rawxx.githubusercontent.com
199.232.96.133 user.githubusercontent.com
199.232.96.133 git.githubusercontent.com
199.232.96.133 giraw.githubusercontent.com
199.232.96.133 avatars56.githubusercontent.com
199.232.96.133 image.githubusercontent.com
199.232.96.133 windowsraw.githubusercontent.com
199.232.96.133 ist.githubusercontent.com
199.232.96.133 raw.githubraw.githubusercontent.com
199.232.96.133 images.githubusercontent.com
199.232.96.133 avatar3.githubusercontent.com
199.232.96.133 avatar5.githubusercontent.com
199.232.96.133 avatar4.githubusercontent.com
199.232.96.133 avatar9.githubusercontent.com
199.232.96.133 avatars10000000000000000000000000000.githubusercontent.com
199.232.96.133 avatars40.githubusercontent.com
199.232.96.133 avatars10000000000000000000000000000000000000000.githubusercontent.com
199.232.96.133 avatars900.githubusercontent.com
199.232.96.133 avatars10000.githubusercontent.com
199.232.96.133 avatars1000.githubusercontent.com
199.232.96.133 avatars80.githubusercontent.com
199.232.96.133 avatars100000000.githubusercontent.com
199.232.96.133 avatars500.githubusercontent.com
199.232.96.133 codeload.githubusercontent.com
199.232.96.133 house.githubusercontent.com
199.232.96.133 httpsraw.githubusercontent.com
199.232.96.133 gaw.githubusercontent.com
199.232.96.133 user-image.githubusercontent.com
199.232.96.133 actions.githubusercontent.com
199.232.96.133 ser-images.githubusercontent.com
199.232.96.133 awe.githubusercontent.com
199.232.96.133 rawraw.githubusercontent.com
199.232.96.133 w.githubusercontent.com
199.232.96.133 rqw.githubusercontent.com
199.232.96.133 coma.githubusercontent.com
199.232.96.133 raws.githubusercontent.com
199.232.96.133 rapid.githubusercontent.com
199.232.96.133 avatar.githubusercontent.com
199.232.96.133 www.avatars0.githubusercontent.com
199.232.96.133 assets-cdn.githubusercontent.com
199.232.96.133 cone.githubusercontent.com
199.232.96.133 favicons.githubusercontent.com
199.232.96.133 pkg.githubusercontent.com
199.232.96.133 rwa.githubusercontent.com
199.232.96.133 raw.raw.githubusercontent.com
199.232.96.133 avatar0.githubusercontent.com
199.232.96.133 avatar2.githubusercontent.com
199.232.96.133 avatar1.githubusercontent.com
199.232.96.133 1raw.githubusercontent.com
199.232.96.133 row.githubusercontent.com
199.232.96.133 github.githubusercontent.com
199.232.96.133 cam.githubusercontent.com
199.232.96.133 api.githubusercontent.com
199.232.96.133 wwwcamo.githubusercontent.com
199.232.96.133 www.camo.githubusercontent.com
199.232.96.133 avatars99.githubusercontent.com
199.232.96.133 avatars19.githubusercontent.com
199.232.96.133 avatars16.githubusercontent.com
199.232.96.133 avatars13.githubusercontent.com
199.232.96.133 avatars12.githubusercontent.com
199.232.96.133 avatars20.githubusercontent.com
199.232.96.133 avatars17.githubusercontent.com
199.232.96.133 avatars11.githubusercontent.com
199.232.96.133 avatars15.githubusercontent.com
199.232.96.133 avatars14.githubusercontent.com
199.232.96.133 avatars18.githubusercontent.com
199.232.96.133 avatars800.githubusercontent.com
199.232.96.133 marketplace-screenshots.githubusercontent.com
199.232.96.133 repository-images.githubusercontent.com
199.232.96.133 gits.githubusercontent.com
199.232.96.133 rraw.githubusercontent.com
199.232.96.133 avatars.githubusercontent.com
199.232.96.133 aw.githubusercontent.com
199.232.96.133 avatars100.githubusercontent.com
199.232.96.133 pipelines.actions.githubusercontent.com
199.232.96.133 user-images.githubusercontent.com
199.232.96.133 media.githubusercontent.com
199.232.96.133 vatars0.githubusercontent.com
199.232.96.133 render.githubusercontent.com
199.232.96.133 www.raw.githubusercontent.com
199.232.96.133 avatars8.githubusercontent.com
199.232.96.133 avatars7.githubusercontent.com
199.232.96.133 avatars9.githubusercontent.com
199.232.96.133 avatars6.githubusercontent.com
199.232.96.133 avatars5.githubusercontent.com
199.232.96.133 avatars10.githubusercontent.com
199.232.96.133 avatars4.githubusercontent.com
199.232.96.133 gist.githubusercontent.com
199.232.96.133 www.githubusercontent.com
199.232.96.133 desktop.githubusercontent.com
199.232.96.133 avatars3.githubusercontent.com
199.232.96.133 avatars0.githubusercontent.com
199.232.96.133 avatars1.githubusercontent.com
199.232.96.133 cloud.githubusercontent.com
199.232.96.133 camo.githubusercontent.com
199.232.96.133 githubusercontent.com
199.232.96.133 avatars2.githubusercontent.com
199.232.96.133 raw.githubusercontent.com


  • 将这个全的内容放入到hosts文件中


  • 通过cmd命令(ipconfig /flushdns)重新刷新本机DNS


  • 再次验证,发现图片都能正常加载,这次真的是爽歪歪


1955d641ba7ede1d2a65901d504c436c_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 获取三级域名及形成符合hosts文件格式文件内容


  • 需要知道GitHub资源文件二级域名(githubusercontent.com)都有哪些三级域名


  • 在一个通过二级域名查其含有三级域名网站进行查询https://chaziyu.com 发现共有124条子域名


7144ca4935e859eeec31600833825aed_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png



  • 这么多二级域名怎么给转换成hosts文件格式那?肯定不能一个一个粘贴


//hosts格式:ip 三级域名
199.232.96.133 scoopraw.githubusercontent.com
199.232.96.133 avators.githubusercontent.com
·····


  • 想到之前用的一个八爪鱼采集器可以获取网页数据的软件,可以将这些三级域名数据爬取到excel中


  • 输入需要爬取网页地址


dd8ba95d8f5c3bf715df87a68bd48ef1_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 自动识别网页


0c6d72931b652a80d85add13072ee2e0_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 生成采集设置


242300ab098c92ac9fb628cc6a46f3b9_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 进行数据采集


9afa2c31aa24816570380570f052cea6_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 采集完成后导出excel


9a33de3f46544a74b9cab81609a9ca30_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 在excel中删除无用列并将 子域名列124条数据粘贴到文本编辑器中(在此以Sublime为例)


d474651514d1186d7fe05c939ec1ae11_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png

b8b575888cdf3181f1df2f84ba6e978b_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


  • 在Sublime中进行列选择在其前面增加统一的ip形成新的hosts文件


ce59d909a504ad7ca52f0baea4f0be9d_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI4MjkxMjQ=,size_16,color_FFFFFF,t_70#pic_center.png


总结


  • 欢迎大家访问我的GitHub并start
  • 本人将持续不断的在GitHub上输出优秀成系列的代码

相关文章
|
3月前
|
存储 Linux Go
如何在Github上Pull Request的教程
关于如何在GitHub上发起Pull Request(合并请求)的详细教程,包括Fork(分支)、Clone(克隆)、创建新分支、修改代码、提交更改、推送到远程仓库等步骤,并提供了解决权限问题的方法,如创建个人访问令牌(Personal Access Token)。
95 6
|
3月前
|
数据采集 数据可视化 Ruby
GitHub星标破万!Python学习教程(超详细),真的太强了!
Python 是一门初学者友好的编程语言,想要完全掌握它,你不必花上太多的时间和精力。 Python 的设计哲学之一就是简单易学,体现在两个方面: 1. 语法简洁明了:相对 Ruby 和 Perl,它的语法特性不多不少,大多数都很简单直接,不玩儿玄学。 2. 切入点很多:Python 可以让你可以做很多事情,科学计算和数据分析、爬虫、Web 网站、游戏、命令行实用工具等等等等,总有一个是你感兴趣并且愿意投入时间的。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
这篇文章是一份详细的GitHub使用教程,介绍了如何在GitHub上创建仓库、创建分支、编辑和发布更改内容、发起拉取请求以及合并分支的操作步骤。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
|
3月前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
3月前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
4月前
|
网络协议 Unix Linux
网安人必须人手一份的《Linux私房教程》,GitHub星标286K!
Linux是一套免费使用和自由传播的操作系统内核,是一个基于POSIX和Unix的多用户、多任务支持多线程和多CPU的操作系统内核。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统内核。 作为网络安全的初学者,Linux基础知识和常用命令是我们的必备技能,我们不能只会操作Windows相关的工具。一方面很多网站都是基于Linux环境搭建,比如LAMP,其安全性更好;另一方面,很多命令或工具都集成在了Linux相关环境中,比如Kali等。 今天给小伙伴们分享一份Linux私房教程,这份
|
5月前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
5月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
5月前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
5月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。