GitHub Pages中PNG与JPG图片无法显示的问题求助
解决GitHub Pages图片无法显示的问题
嘿,我来帮你搞定这个图片不显示的难题!你遇到的问题其实很常见,核心原因和解决方法我给你拆解清楚:
1. 你用错了图片链接类型
你当前用的https://github.com/george/Link-tree/blob/master/personal_photo.jpg是GitHub的图片预览页面链接,不是图片本身的原始资源地址。GitHub Pages加载图片需要直接指向图片文件的URL,而不是网页页面。
怎么获取正确的原始链接:
打开仓库里的图片详情页,点击页面右上角的「Raw」按钮(就在「Download」按钮旁边),此时浏览器地址栏里的URL就是图片的原始资源链接,格式大概是这样:https://raw.githubusercontent.com/george/Link-tree/master/personal_photo.jpg
把这个链接替换到HTML的src属性里就能正常加载了。
2. 更推荐用相对路径(更稳妥)
既然你的图片和index.html在同一仓库目录下,直接用相对路径比全URL更靠谱,还能避免Raw链接的格式变动问题。比如:
<img src="personal_photo.jpg" alt="个人照片">
如果之后把图片移到子文件夹(比如images文件夹),只要把路径改成src="images/personal_photo.jpg"就行,不用改域名部分。
3. PNG图片不显示的原因一样
PNG的问题和JPG完全相同,都是用了预览页面链接而非原始资源链接,按照上面的方法替换链接就可以解决。
4. 不需要特意移动图片到其他文件夹
只要路径正确,图片放在根目录或者子文件夹都没问题,不用为了显示而特意迁移。如果放在子文件夹,记得同步调整相对路径或者Raw链接里的路径部分。
额外检查点
- 确认GitHub Pages已经完成部署:有时候修改代码后,Pages需要等1-5分钟才能更新,刚提交完别急着刷新检查。
- 再核对一次文件名大小写:虽然你说排查过,但Linux环境的GitHub Pages是严格区分大小写的,比如
Personal_Photo.jpg和personal_photo.jpg会被识别成两个不同的文件,务必保持HTML里的文件名和仓库里的完全一致。
内容的提问来源于stack exchange,提问作者Giliop




