GitHub圖片加載不出來解決方案（超詳細圖文教程）

GitHub圖片加載不出來解決方案（超詳細圖文教程）

前言

最近在訪問GitHub時發現所有涉及到圖片都加載失敗，使人感覺極度不適；不將就是發現的源動力；有了之前《WordPress網站訪問慢解決方案（超詳細圖文教程）》經驗這次解決起來就順利許多，下面是解決方案。

優化前：

• 所有圖片類型文件加載失敗

優化後：

• 所有圖片類型文件正常加載

學完本教程你能得到什麼

• 排查網站加載資源失敗解決思路
• 使用軟件獲取網頁數據進行格式化處理
• 一顆不斷探索的心
• 一套可實時可落地的解決問題的套路

解決方案流程圖

• 流程圖
  
  

問題&解決方案&驗證

• 問題（訪問github，頭像等圖片加載失敗）

• 定位問題（圖片資源域名訪問不通）

  • 在google瀏覽器按F12，指定頭像，找到頭像url地址
    
    

  • 在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
    

  • 查詢域名映射ip對應關係網站 https://www.ipaddress.com
    
    

  • 可以看出是解析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
    

• 在cmd中執行命令刷新本機DNS緩存

  ipconfig /flushdns
  

• 進行驗證，再次刷新github，發現頭像可以正常加載，一下心情美麗許多

• 當瀏覽項目時，發現有些項目中的圖片還是加載失敗

• 再次通過google瀏覽器F12定位圖片URL
  
  

• 項目中的圖片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

• 再次驗證，發現圖片都能正常加載，這次真的是爽歪歪
  
  

• 獲取三級域名及形成符合hosts文件格式文件內容

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

  • 在一個通過二級域名查其含有三級域名網站進行查詢https://chaziyu.com 發現共有124條子域名
    
    

  • 隨機抽查幾個三級域名去 域名對應ip查詢( https://www.ipaddress.com) 發現對應ip都是199.232.96.133

  • 這麼多二級域名怎麼給轉換成hosts文件格式那？肯定不能一個一個粘貼

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

  • 想到之前用的一個八爪魚採集器可以獲取網頁數據的軟件，可以將這些三級域名數據爬取到excel中

    • 輸入需要爬取網頁地址
      
      

    • 自動識別網頁
      
      

    • 生成採集設置
      
      

    • 進行數據採集
      
      

    • 採集完成後導出excel
      
      

  • 在excel中刪除無用列並將 子域名列124條數據粘貼到文本編輯器中(在此以Sublime爲例)
    
    
    
    

  • 在Sublime中進行列選擇在其前面增加統一的ip形成新的hosts文件
    
    

總結

• 歡迎大家訪問我的GitHub並start
• 本人將持續不斷的在GitHub上輸出優秀成系列的代碼