好幾個(gè)星期之前本人就發(fā)現(xiàn)網(wǎng)頁(yè)打開(kāi)顯示不了圖片的問(wèn)題了，不過(guò)當(dāng)時(shí)沒(méi)在意。

今天強(qiáng)迫癥逼迫我一定要搞定它，于是去找了一些方法，自己做個(gè)記錄，有相同問(wèn)題的伙伴可以參考一下。

一、問(wèn)題

比如隨便打開(kāi)一個(gè)項(xiàng)目，圖片都不能顯示了，我頭像也沒(méi)了，真是一個(gè)令人傷心的事

image.png

image.png

去查了一下，博主john-zeng這樣解釋道：

實(shí)際上，可以認(rèn)為，ERR_CERT_COMMON_NAME_INVALID就是用一個(gè)錯(cuò)誤的域名訪問(wèn)了某個(gè)節(jié)點(diǎn)的https資源。導(dǎo)致這個(gè)錯(cuò)誤的原因，基本是：

1. dns污染
2. host設(shè)置錯(cuò)誤
3. 官方更新了dns，但是dns緩存沒(méi)有被更新，導(dǎo)致錯(cuò)誤解析。

我覺(jué)得像是有點(diǎn)道理，解決方法就粗來(lái)了，hin簡(jiǎn)單，往下看。

二、解決方法

主要思路就是使用本地hosts文件對(duì)網(wǎng)站進(jìn)行域名解析，一般的DNS問(wèn)題都可以通過(guò)修改hosts文件來(lái)解決，github的CDN域名被污染問(wèn)題也不例外，同樣可以通過(guò)修改hosts文件解決，將域名解析直接指向IP地址來(lái)繞過(guò)DNS的解析，以此解決污染問(wèn)題。

2.1 找到URL

打開(kāi)github任意未顯示圖片的網(wǎng)頁(yè)，使用元素選擇器（Ctrl+Shift+C）放在顯示不了的圖片上，或者在無(wú)法顯示的圖片上右鍵-檢查元素，定位到該圖片的標(biāo)簽，那么你得到了它的URL，叫做src屬性。

image.png

在右面把它的網(wǎng)址復(fù)制粗來(lái)：

https://avatars2.githubusercontent.com/u/15832957?s=60&v=4

2.2 獲取IP地址

得到上述網(wǎng)址以后打開(kāi)IPAddress.com這個(gè)網(wǎng)站，在搜索框輸入它的域名，就是https://到com那一部分，俗稱(chēng)二級(jí)域名：

avatars2.githubusercontent.com

image.png

image.png

（其他如果有掛掉的圖片一樣使用此方法進(jìn)行一一映射即可。）

2.3 修改hosts

具體咋映射呢？修改hosts文件！?。”救耸褂玫氖?code>windows系統(tǒng)，所以使用Sublime Text打開(kāi)：C:\Windows\System32\drivers\etc\hosts

在文件末尾添加：

image.png

==20210119有效（包括MAC系統(tǒng)）；最后一次更新：20210123；時(shí)至今日是否有效詳見(jiàn)評(píng)論區(qū)~==

可以直接選中以下內(nèi)容復(fù)制：

# GitHub Start 
140.82.113.3      github.com
140.82.114.20     gist.github.com

151.101.184.133    assets-cdn.github.com
151.101.184.133    raw.githubusercontent.com
199.232.28.133     raw.githubusercontent.com 
151.101.184.133    gist.githubusercontent.com
151.101.184.133    cloud.githubusercontent.com
151.101.184.133    camo.githubusercontent.com
199.232.96.133     avatars.githubusercontent.com
151.101.184.133    avatars0.githubusercontent.com
199.232.68.133     avatars0.githubusercontent.com
199.232.28.133     avatars0.githubusercontent.com 
199.232.28.133     avatars1.githubusercontent.com
151.101.184.133    avatars1.githubusercontent.com
151.101.108.133    avatars1.githubusercontent.com
151.101.184.133    avatars2.githubusercontent.com
199.232.28.133     avatars2.githubusercontent.com
151.101.184.133    avatars3.githubusercontent.com
199.232.68.133     avatars3.githubusercontent.com
151.101.184.133    avatars4.githubusercontent.com
199.232.68.133     avatars4.githubusercontent.com
151.101.184.133    avatars5.githubusercontent.com
199.232.68.133     avatars5.githubusercontent.com
151.101.184.133    avatars6.githubusercontent.com
199.232.68.133     avatars6.githubusercontent.com
151.101.184.133    avatars7.githubusercontent.com
199.232.68.133     avatars7.githubusercontent.com
151.101.184.133    avatars8.githubusercontent.com
199.232.68.133     avatars8.githubusercontent.com
199.232.96.133     avatars9.githubusercontent.com

# GitHub End

然后保存文件就OK了，至于無(wú)法保存，沒(méi)有修改權(quán)限，鼠標(biāo)右鍵-屬性-安全-修改權(quán)限；或?qū)?code>hosts文件復(fù)制一份，修改之后，復(fù)制到原文件夾替換！

三、最后說(shuō)幾句

還可以使用ipconfig/flush對(duì)本地DNS緩存進(jìn)行一次刷新，如果遇到網(wǎng)絡(luò)異常，可能是DNS緩存的問(wèn)題，刷新一下，步驟。

1. windows開(kāi)始→運(yùn)行→輸入：CMD 按回車(chē)鍵，打開(kāi)命令提示符窗口。
2. 再輸入： ipconfig /flushdns 回車(chē),執(zhí)行命令，可以重建本地DNS緩存。

再附上幾個(gè)命令：

ipconfig /displaydns # 顯示dns緩存 

ipconfig /flushdns # 刷新DNS記錄 

ipconfig /renew # 重請(qǐng)從DHCP服務(wù)器獲得IP 

PS：另外要注意的一點(diǎn)就是，如果圖片再次不能顯示，只需要及時(shí)更新IP就行啦，這波操作不麻煩，你看我頭像回來(lái)了?。?！

image.png

image.png

哈哈哈，沒(méi)錯(cuò)，是李現(xiàn)