Страницы Github, не отображающие изображения внутри моего div

Question

Я создал новое репо и загрузил все файлы, но изображения в моем div id = «Контейнер» внутри моих индексных файлов не отображаются. https://github.com/hkhan194/tres-chic/tree/gh-pages

Я изучил все другие вопросы по этому вопросу и попробовал их, но пока не показывал изображение.

Answer 1

@Hkhan Я попытался ссылку в IE и Google Chrome,

В IE:

Ваш сайт работает нормально, становятся изображения отображаются.

В Google Chrome:

не получают Воспроизводятся изображения, и когда я проверил консоль, я получаю эту ошибку

Ошибка: Mixed Содержание: страница на «https://hkhan194.github.io/tres-chic/» был загружен поверх HTTPS, но запросил небезопасный сценарий «http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js». Этот запрос заблокирован; содержимое должно быть передано через HTTPS.

Решение:

• Похоже, что Google хром не позволяет принятие сценария с URL вы упомянули для JS.
• Так что ошибка «mixItUp is not a function» возникает, так как функция mixItUp является исходным JS-файлом.
• Так что вы можете сохранить этот файл яваскрипта как «jquery.mixitup.min.js» в вашем GitHub в определенном пути, а затем включить JavaScript в теге в файле индекса, как показано ниже,

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

Answer 2

Во-первых, это не вопрос GitHub. На страницах GitHub просто хранятся ваши файлы. Это действительно вопрос о HTML.

Во-вторых, вам повезет больше, если вы разместите MCVE. В вашем случае это будет меньшая тестовая страница, которая отображает только одно изображение.

Это, как говорится, я рекомендую идти к полученному HTML файл: https://hkhan194.github.io/tres-chic/

правой кнопкой мыши в любом месте этой страницы, а затем перейдите в раздел «Просмотр кода элемента». Это откроет окно, которое позволит вам изучить элементы страницы, увидеть любые ошибки, которые вы получаете, и посмотреть, что происходит по сети. Я использую Chrome, но каждый браузер должен иметь что-то очень похожее.

На вкладке «Сеть» обратите внимание, что некоторые из ваших файлов изображений не найдены. Они, похоже, являются результатом орфографических ошибок: JPG или jpeg вместо jpg, такого рода вещи.

Затем на вкладке Элементы найдите свою сетку продуктов. Обратите внимание, что его высота равна 0, что кажется неправильным. Затем зайдите в теги div class="mix category-*" и обратите внимание, что все они имеют displaynone!

Проблема заключается в том, что ваш CSS устанавливает #Container .mix в display:none, что предотвратит их отображение.

Пожалуйста, попробуйте войти в привычку изучать вашу страницу с помощью этого окна и попытаться понять разницу между страницами GitHub и тем, что делает ваш HTML. Если у вас есть дополнительные вопросы, попробуйте сузить проблему до меньшей страницы примера. Удачи.