You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

GitHub Pages中PNG与JPG图片无法显示的问题求助

解决GitHub Pages图片无法显示的问题

嘿,我来帮你搞定这个图片不显示的难题!你遇到的问题其实很常见,核心原因和解决方法我给你拆解清楚:

1. 你用错了图片链接类型

你当前用的https://github.com/george/Link-tree/blob/master/personal_photo.jpgGitHub的图片预览页面链接,不是图片本身的原始资源地址。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.jpgpersonal_photo.jpg会被识别成两个不同的文件,务必保持HTML里的文件名和仓库里的完全一致。

内容的提问来源于stack exchange,提问作者Giliop

火山引擎 最新活动