logo标签列表

Github Pages中图片无法显示？

htmlimagegithubgithub-pages
39

我在我的 Github 项目中添加了一个项目网站，但是一些照片在网站中没有显示。

图片代码：

<img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div>

文件夹结构（img是一个文件夹）：

img
    Screenshot2.png
index.html

我尝试了使用.png和.PNG（之前的一些 Stack Overflow 回答建议使用这些后缀名），但它们都不起作用。

有什么解决方法吗？

2
https://dev59.com/G4Pba4cB1Zd3GeqPz_ws - Ciro Santilli OurBigBook.com
确保使用**Ctrl + R**完全重新加载页面。 - undefined
23个回答
65

没事了，问题已经解决。

如果有人遇到同样的问题。

GitHub Pages 是大小写敏感的。不仅对于文件夹而言，图片名称也是如此。

9
在我的情况下，经过短暂的延迟后，它起作用了。我认为 Github 托管服务器需要一些时间来更新文件。 - dnivog
15

是的，我有同样的问题。

  1. 要解决这个问题，有两种最有效的方法：
  2. 注意图像扩展名的大小写，因为在GitHub页面上，Images.png和images.png是不同的。
  3. 如果你在代码中像这样写图像的src路径：src="/images/images.png"，只需删除路径开头的斜杠即可解决问题。
3
我删掉了开头的斜杠，问题就解决了。 - Linje
12

正如@dnivog提到的那样，GitHub服务器需要一些时间来更新文件。

如果以上方法都不能解决您的问题，请稍等一下再检查。⏳

12
向谷歌用户提供一些建议：Git Pages似乎会忽略以下划线开头的目录，因此请确保您没有使用类似于<a href="_images/whatever.jpg"> 的链接。
当我滚动过所有那些学习网络大小写敏感性的评论时，我已经开始怀疑 Github Pages 找不到图像的原因是否是因为路径中有下划线。所以点个赞吧。 - ow3n
如果您没有使用Jekyll，您可以添加.nojekyll文件，以便识别下划线图像。请参考此链接：https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/ - undefined
10

写下你所看到的。

这是 Screenshot2.png，文件扩展名为小写的 png，并且文件名以大写字母 S 开头。

7
在Github上托管网站时，我遇到了同样的问题。图像文件在本地以.jpg的格式保存，并且正常工作。但是，当我将其推送到Github时却无法正常工作。
我不得不将扩展名更改为.JPG（大写字母），因为它是图像的原始扩展名。 Github页面对上传的文件名区分大小写。
这也是我的解决方法。我使用蛇形命名法和小写字母重命名了所有内容，以避免任何潜在的未知问题。现在图像可以正常工作了。 - Rocky Kev
7

我今天遇到了这个问题。 我通过以下方式解决：

  • 双重检查图像的大小写敏感性（即， Screenshot.png 与 Screenshot.PNG 或甚至 screenshot.png 不同）
  • 双重检查图像的路径 PATH。 对于我来说;它是 ../img/myImg.jpg，我将其更改为 ./img/myImg.jpg ，以指向项目当前目录

在解决上述2个问题后，它正常工作了...希望能帮助你解决困境！

我遇到了同样的问题：一个偶然的“../”，在本地工作是因为我已经在根目录级别上，但在GitHub页面上删除了仓库名称。 - undefined
6

我尝试使用JPG 或 jpg，但都无法正常工作。

我尝试了以下步骤，并且成功了。

尝试使用完整路径。假设您的图像位于 repo-name/img/pic.jpg 内。然后使用https://username.github.io/repo-name/img/pic.jpg 而不是仅使用 /img/pic.jpg。

6

对于任何仍在浏览答案的人:

  1. 确保图像已上传到您的远程服务器。在您的主要存储库页面上，点击图像名称并查看是否打开：如果是，请继续执行下一步

  2. 使用 "Github pages" 加载网站

  3. 打开检查元素（DevTools），进入您的 .html 文件或 CSS 样式中定义了 src 的 html 元素处

  4. 在这里尝试所有人们上面描述的各种解决方案[对我有用的是：我在我的 src 前添加了 ./ => ./name-image

  5. 无论哪个解决方案可行，都将更改应用于本地的 html 或 CSS，并推送到 Github。

这是对我有效的方法。 - GPP
4

我有一个类似的问题，但我使用git-lfs管理图像。GitHub Pages不支持LFS，这将阻止图像显示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接