Github页面没有在我的div中显示图像

Question

我创建了一个新的repo并上传了所有文件但是我的索引文件中的div id =“Container”中的图像没有显示出来。 https://github.com/hkhan194/tres-chic/tree/gh-pages

我查看了有关此事的所有其他问题并尝试了但仍未显示图像。

Answer 1

首先，这不是一个GitHub页面问题。 GitHub页面只托管您的文件。这实际上是关于HTML的问题。

其次，如果你发布MCVE，你会有更好的运气。在您的情况下，这将是一个较小的测试页面，只显示一个图像。

话虽如此，我建议您转到生成的HTML文件：https://hkhan194.github.io/tres-chic/

右键单击该页面中的任意位置，然后转到＆＃34; Inspect Element＆＃34;。这将打开一个窗口，让您浏览页面元素，查看您获得的任何错误，并查看网络上发生的情况。我使用Chrome浏览器，但每个浏览器都应该有类似的东西。

在“网络”标签上，请注意您的某些图片文件未找到。这些似乎是拼写错误的结果：JPG或jpeg而不是jpg，这类事情。

然后在“元素”选项卡上，找到您的产品网格。请注意，它的高度为0，这看起来并不合适。然后进入div class="mix category-*"代码，注意他们都有display none！

问题是您的CSS将#Container .mix设置为display:none，这会阻止它们显示。

请尝试养成使用此窗口浏览页面的习惯，并尝试了解GitHub页面正在执行的操作与HTML正在执行的操作之间的区别。如果您还有其他问题，请尝试将问题缩小到较小的示例页面。祝你好运。

Answer 2

@Hkhan我在IE和Google Chrome中尝试了这个链接，

在IE中：

您的网站运行正常，图片正在显示。

在Google Chrome中

图像没有显示，当我检查控制台时，我收到此错误

错误： 混合内容：“https://hkhan194.github.io/tres-chic/”页面是通过HTTPS加载的，但请求了一个不安全的脚本“http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js”。此请求已被阻止;内容必须通过HTTPS提供。

<强>解决方案：

• 似乎Google Chrome不允许从您为JS提及的网址接受该脚本。
• 因为mixItUp函数来自以前的JS文件，所以“mixItUp不是函数”错误被抛出。
• 所以你可以在你的github中将javascript文件保存为特定路径中的“jquery.mixitup.min.js”，然后在索引文件的标记中包含javascript，如下所示，

<script src="Your path/jquery.mixitup.min.js"></script>