解决Github网页图片加载失败

情况说明

最近打开Github经常会遇到用户头像或者仓库中的图片无法预览。F12打开控制台也能看到一堆报错信息。

解决方法

  • 找到hosts文件

Win: C:\Windows\System32\drivers\etc\hosts

Mac: command+shift+g打开前往输入/etc/hosts

  • 把下列内容粘贴到hosts中
# GitHub Start 
140.82.113.3    gist.github.com
185.199.108.153    assets-cdn.github.com
199.232.96.133    raw.githubusercontent.com
199.232.96.133    avatars0.githubusercontent.com
199.232.96.133    avatars1.githubusercontent.com
199.232.96.133    avatars2.githubusercontent.com
199.232.96.133    avatars3.githubusercontent.com
199.232.96.133    avatars4.githubusercontent.com
199.232.96.133    avatars5.githubusercontent.com
199.232.96.133    avatars6.githubusercontent.com
199.232.96.133    avatars7.githubusercontent.com
199.232.96.133    avatars8.githubusercontent.com
# GitHub End

原因分析

猜测是域名解析错误(DNS污染、hosts设置错误、DNS缓存未更新等)。因此使用hosts配置,域名解析直接指向IP地址来绕过DNS的解析

更进一步

由于IP地址经常变动,因此上述提供的IP地址不一定能用,可以在ipaddress输入域名后来获得最新的IP,比如输入:avatars0.githubusercontent.com,获得的IP为199.232.96.133:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGpzy1hx-1609843676844)(https://raw.githubusercontent.com/iningwei/SelfPictureHost/master/Blog/20210105183345.png)]

另外若hosts配置已经是最新的,仍然遇到部分图片加载失败,可以F12后在控制台找到报错的域名,同样通过ipaddress获得IP,然后对应的IP和域名加入到hosts中

如果遇到DNS缓存问题,可以执行cmd命令,重建本地dns缓存,命令为ipconfig/flushdns

补充命令:

ipconfig/displaydns  # 显示dns缓存 
ipconfig/renew  # 重请从DHCP服务器获得IP 
### 如何在GitHub Pages或个人网站中添加和显示图片 要在GitHub Pages或个人网站中添加并正常显示图片,可以按照以下方法操作: #### 方法一:通过本地路径引用图片 如果使用的是静态HTML页面,则可以直接将图片文件放置到项目的根目录或者特定的`assets/images`文件夹下。假设有一个名为 `example.jpg` 的图片存储在项目中的 `images/example.jpg` 路径下,在HTML代码中可以通过相对路径来引用该图片[^1]。 ```html <img src="images/example.jpg" alt="Example Image"> ``` #### 方法二:利用GitHub仓库作为图床服务 当构建基于GitHub Pages的博客时,通常会遇到图片无法加载的情况。这是因为图片的实际存储位置发生了变化。此时可采用一种常见的解决办法——把图片上传至GitHub仓库,并将其URL设置为远程链接形式。例如,对于一张位于资产文件夹下的图片而言,其最终展示出来的URL可能类似于下面这种结构[^2]: ```plaintext https://raw.githubusercontent.com/用户名/仓库名/分支名/path/to/image.png ``` 因此,如果你已经有一张图片存放在某个具体的路径里(比如 `/asset/pictures/filename.png`),那么就可以这样写入Markdown文档当中去调用它: ```markdown ![Image Description](https://raw.githubusercontent.com/你的用户名/你的仓库名称/main/asset/pictures/filename.png) ``` #### 方法三:借助Hexo框架管理资源 如果是通过Hexo工具生成的内容再发布到GitHub Pages平台上的话,还需要额外关注一些配置细节才能让所有的多媒体素材都能被正确渲染出来。创建新文章的时候,默认情况下这些附加材料应该放到_post对应的子目录里面;与此同时也要确认站点配置文件 `_config.yml` 中关于 URL_ROOT 参数设定无误以便于后续处理过程顺利进行下去[^3]。 另外需要注意的一点就是,有时候即使完成了上述所有步骤之后仍然发现某些地方存在空白区域或者其他异常现象,这可能是由于缓存机制引起的或者是网络请求失败造成的。所以建议定期清理浏览器历史记录以及尝试更换不同设备重新打开网页来进行验证测试工作直至完全解决问题为止[^4]。 ```yaml # Example of _config.yml configuration related to image paths. url: https://yourusername.github.io root: / ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iningwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值