Github 页面在我的 div 中没有显示图像
Github pages not showing images inside my div
我创建了一个新的存储库并上传了所有文件，但我的索引文件中 div id="Container" 中的图像没有显示。 https://github.com/hkhan194/tres-chic/tree/gh-pages
我调查了有关此事的所有其他问题并进行了尝试，但仍然没有显示图像。
首先，这并不是真正的 GitHub 页问题。 GitHub 页面只是托管您的文件。这真是一个关于HTML.
的问题
其次，如果你post一个MCVE，你的运气会好得多。在您的情况下，这将是一个较小的测试页，仅显示一个图像。
话虽如此，我建议转到生成的 HTML 文件：https://hkhan194.github.io/tres-chic/
右键单击该页面的任意位置，然后转到 "Inspect Element"。这将打开一个 window，让您浏览页面元素，查看您遇到的任何错误，并查看网络上发生的情况。我正在使用 Chrome，但每个浏览器都应该有非常相似的东西。
在“网络”选项卡上，请注意找不到您的某些图像文件。这些似乎是拼写错误的结果：JPG 或 jpeg 而不是 jpg，诸如此类。
然后在“元素”选项卡上，找到您的产品网格。请注意，它的高度是 0，这似乎不对。然后进入 div class="mix category-*" 标签，注意它们都有 display 的 none!
问题是您的 CSS 将 #Container .mix 设置为 display:none，这将阻止它们显示。
请尝试养成使用此 window 探索您的页面的习惯，并尝试了解 GitHub 页面正在做的事情与您的 HTML 正在做的事情之间的区别.如果您还有其他问题，请尝试将您的问题缩小到较小的示例页面。祝你好运。
@Hkhan 我在 IE 中试过 link 和 Google Chrome,
在 IE 中：
您的网站运行良好，正在显示图片。
在Google Chrome:
图像未显示，当我检查控制台时，出现此错误
错误:
混合内容：位于“https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js”的页面。此请求已被阻止；内容必须通过 HTTPS 提供。
解决方案:
- 似乎 Google chrome 不允许接受您为 JS 提到的 url 中的脚本。
- 所以会抛出 "mixItUp is not a function" 错误，因为 mixItUp 函数来自以前的 JS 文件。
- 因此您可以将 javascript 文件另存为 "jquery.mixitup.min.js" 在您的 github 中的特定路径中，然后将 javascript 包含在索引文件的标记中作为如下所示，
<script src="Your path/jquery.mixitup.min.js"></script>
我创建了一个新的存储库并上传了所有文件，但我的索引文件中 div id="Container" 中的图像没有显示。 https://github.com/hkhan194/tres-chic/tree/gh-pages
我调查了有关此事的所有其他问题并进行了尝试，但仍然没有显示图像。
首先，这并不是真正的 GitHub 页问题。 GitHub 页面只是托管您的文件。这真是一个关于HTML.
的问题其次，如果你post一个MCVE，你的运气会好得多。在您的情况下，这将是一个较小的测试页，仅显示一个图像。
话虽如此，我建议转到生成的 HTML 文件：https://hkhan194.github.io/tres-chic/
右键单击该页面的任意位置，然后转到 "Inspect Element"。这将打开一个 window，让您浏览页面元素，查看您遇到的任何错误，并查看网络上发生的情况。我正在使用 Chrome，但每个浏览器都应该有非常相似的东西。
在“网络”选项卡上，请注意找不到您的某些图像文件。这些似乎是拼写错误的结果：JPG 或 jpeg 而不是 jpg，诸如此类。
然后在“元素”选项卡上，找到您的产品网格。请注意，它的高度是 0，这似乎不对。然后进入 div class="mix category-*" 标签，注意它们都有 display 的 none!
问题是您的 CSS 将 #Container .mix 设置为 display:none，这将阻止它们显示。
请尝试养成使用此 window 探索您的页面的习惯，并尝试了解 GitHub 页面正在做的事情与您的 HTML 正在做的事情之间的区别.如果您还有其他问题，请尝试将您的问题缩小到较小的示例页面。祝你好运。
@Hkhan 我在 IE 中试过 link 和 Google Chrome,
在 IE 中：
您的网站运行良好，正在显示图片。
在Google Chrome:
图像未显示，当我检查控制台时，出现此错误
错误: 混合内容：位于“https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js”的页面。此请求已被阻止；内容必须通过 HTTPS 提供。
解决方案:
- 似乎 Google chrome 不允许接受您为 JS 提到的 url 中的脚本。
- 所以会抛出 "mixItUp is not a function" 错误，因为 mixItUp 函数来自以前的 JS 文件。
- 因此您可以将 javascript 文件另存为 "jquery.mixitup.min.js" 在您的 github 中的特定路径中，然后将 javascript 包含在索引文件的标记中作为如下所示，
<script src="Your path/jquery.mixitup.min.js"></script>