图片未显示在 Github 页面中？答案

【问题标题】：Images not displaying in Github Pages?图片未显示在 Github 页面中？
【发布时间】：2017-05-19 01:07:38
【问题描述】：

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

图片代码：

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

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

img
    Screenshot2.png
index.html

我尝试使用 .png 和 .PNG（一些较早的 SO 答案建议这样做），但它们都不起作用

有什么解决办法吗？

【问题讨论】：

stackoverflow.com/questions/26196788/…

标签： html image github github-pages

【解决方案1】：

没关系，我解决了。

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

GitHub 页面区分大小写。不仅适用于文件夹，还适用于图像名称。

【讨论】：

在我的情况下，它在短暂的延迟后工作。我假设 github 托管服务器需要一些时间来更新文件。
伟大的研究兄弟！确实

【解决方案2】：

写下你看到的。

它是Screenshot2.png。以小写 png 和大写 S 开头。

【讨论】：

【解决方案3】：

您可以尝试将 github 存储库中的“图片链接地址”放在文件 HTML 代码的“img”标签的“src”属性中。

【讨论】：

欢迎来到SO，这个答案不能解决问题，他已经在他的图像标签中使用了src，问题仍然存在，请仔细阅读问题，然后尝试给出有用的答案.

【解决方案4】：

我的笔记本电脑上有一个名为“assets”的文件夹，但是当我推送到 Github 时，它变成了“Assets”。我必须在我的 HTML 中更改它，以便我可以在 Github 页面上查看图像

我笔记本电脑上的 repo：

GitHub 上的仓库：

【讨论】：

【解决方案5】：

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

如果以上都无法解决您的问题，请稍后再回来查看。 ⏳

【讨论】：

【解决方案6】：

在 Github 上托管网站时，我遇到了同样的问题。图像文件在我的本地（小写字母）上保存为 .jpg 扩展名，并且工作正常。我把同样的东西推到了github。那没用。

我不得不将扩展名更改为 .JPG（大写），因为它是图像的原始扩展名。Github 页面对上传文件的名称区分大小写。

【讨论】：

这也是我的解决方法。我使用蛇形和小写重命名所有内容，以避免任何潜在的未知数。图像现在可以工作了。

【解决方案7】：

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

仔细检查图像的Case Sensitive（即Screenshot.png与Screenshot.PNG甚至screenshot.png不同）
仔细检查图像的PATH。为了我;原来是../img/myImg.jpg，我改成./img/myImg.jpg指向项目的当前目录

在解决了上面提到的 2 个问题后，它运行良好......希望它可以帮助你摆脱困境！

【讨论】：

【解决方案8】：

我遇到了同样的问题，GitHub Pages 似乎对图像区分大小写，我写的是 .JPG 而不是 .jpg，一旦我将图像扩展名更改为小写就可以了。

【讨论】：

【解决方案9】：

我有一个类似的问题，除了我使用 git-lfs 来管理图像。 GitHub Pages 不支持 LFS，会导致图片无法显示。

【讨论】：

【解决方案10】：

我挣扎了很久，直到看到 Elharony 的一篇帖子：https://stackoverflow.com/users/5560399/elharony 谈论区分大小写。事实证明，Jupyter notebook 对图像文件不区分大小写，但 GitHub 是。这解决了我的问题。

【讨论】：

【解决方案11】：

为 googlers 添加我的两分钱：Git Pages 似乎忽略了以下划线开头的目录，因此请确保您没有 <a href="_images/whatever.jpg">。

【讨论】：

+1 当我从那些学习网络区分大小写的人那里滚动浏览所有 cmets 时，我开始怀疑 github 页面找不到图像的原因是否是因为我的路。

【解决方案12】：

我尝试同时使用 JPG 或 jpg，但它不起作用。

我尝试了以下步骤，效果很好。

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

【讨论】：

【解决方案13】：

如果您将文件导入 JS 文件并使用相对路径。记住要有来自 HTML 文件的相对路径，而不是来自 JS 文件的相对路径，因为它最终只会编译成 HTML 文件。

【讨论】：

【解决方案14】：

我在 GitHub 页面上遇到了同样的问题：

我写的是../img/image.PNG，而不是../img/image.png，现在它可以正常工作了。

以防万一有人遇到这个错误！

【讨论】：

将 .png 更改为 .PNG 无法解决此问题。

【解决方案15】：

我原来的

将在 github 托管页面上工作

【讨论】：

【解决方案16】：

是的，我有同样的问题有两种最有效的方法来解决它

注意图片扩展的写法，因为github页面上Images.png和images.png 不一样
如果在您的代码中您像这样在图像上编写 src src="/images/images.png"，只需删除该部分开头的 / 即可解决您的问题。

【讨论】：

我删除了开头的“/”，它解决了我的问题。