Github Seiten nicht Bilder in meinem div

Question

Ich habe ein neues Repo erstellt und hochgeladen alle Dateien, aber die Bilder in meinem div id = "Container" innerhalb meiner Indexdateien werden nicht angezeigt. https://github.com/hkhan194/tres-chic/tree/gh-pages

Ich habe mir alle anderen Fragen zu diesem Thema angeschaut und probiert doch immer noch kein Bild.

Answer 1

@Hkhan ich den Link in IE und Google Chrome versucht haben,

In IE:

Ihre Website funktioniert gut, die Bilder werden angezeigt bekommen.

In Google Chrome:

Die Bilder und werden nicht angezeigt wird, wenn ich die Konsole überprüft, erhalte ich diesen Fehler

Fehler: Mixed Inhalt: Die Seite auf 'https://hkhan194.github.io/tres-chic/' wurde über HTTPS geladen, aber ein unsiches Skript 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js' angefordert. Diese Anfrage wurde blockiert. Der Inhalt muss über HTTPS bereitgestellt werden.

Lösung:

• Es scheint, dass Google Chrome Annahme des Skripts nicht aus der URL ermöglicht wird Ihnen für die JS erwähnt haben.
• Der Fehler "mixItUp ist keine Funktion" wird ausgelöst, da die Funktion mixItUp aus der früheren JS-Datei stammt.
• So könnte man die JavaScript-Datei als "jquery.mixitup.min.js" in Ihrem Github in einem bestimmten Pfad speichern und schließen Sie dann die Javascript in dem Tag in Ihrer Index-Datei, wie unten gezeigt,

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

Answer 2

Zunächst ist dies nicht wirklich eine Frage GitHub-Seiten. GitHub-Seiten hosten einfach Ihre Dateien. Das ist wirklich eine Frage zum HTML.

Zweitens haben Sie viel mehr Glück, wenn Sie eine MCVE post. In Ihrem Fall wäre dies eine kleinere Testseite, die nur ein einzelnes Bild anzeigt.

aber sagen, dass ich empfehlen, auf die resultierende HTML-Datei gehen: https://hkhan194.github.io/tres-chic/

Rechtsklicken sie irgendwo in die Seite, und dann gehen Sie auf „Element untersuchen“. Dadurch öffnet sich ein Fenster, in dem Sie die Seitenelemente erkunden, mögliche Fehler sehen und sehen können, was im Netzwerk passiert. Ich verwende Chrome, aber jeder Browser sollte etwas sehr ähnliches haben.

Beachten Sie auf der Registerkarte Netzwerk, dass einige Ihrer Bilddateien nicht gefunden werden. Diese scheinen das Ergebnis von Rechtschreibfehlern zu sein: JPG oder jpeg anstelle von jpg, so etwas.

Dann auf der Registerkarte Elemente finden Sie Ihre Produkte Gitter. Beachten Sie, dass seine Höhe 0 ist, was nicht richtig erscheint. Dann gehen Sie in die div class="mix category-*" Tags und beachten Sie, dass sie alle eine display von none haben!

Das Problem ist, dass Ihr CSS #Container .mix auf display:none setzt, was verhindern wird, dass sie angezeigt werden.

Bitte versuchen Sie, sich mit diesem Fenster Ihre Seite anzusehen und versuchen Sie den Unterschied zwischen dem, was GitHub Pages macht, und dem, was Ihr HTML macht, zu verstehen. Wenn Sie weitere Fragen haben, versuchen Sie bitte, Ihr Problem auf eine kleinere Beispielseite einzuschränken. Viel Glück.