div内の画像が表示されないGithubページ

Question

新しいレポを作成してすべてのファイルをアップロードしましたが、インデックスファイル内のdiv id = "Container"の画像は表示されません。 https://github.com/hkhan194/tres-chic/tree/gh-pages

この問題に関するその他の質問をすべて調べてみましたが、まだ画像が表示されていません。

Answer 1

、IEでは

：

あなたのウェブサイトが正常に動作しているが、画像が表示されてきています。

Google Chromeで

：

画像が表示取得されていない

と私はコンソールをチェックすると、私はこのエラーを取得しています

エラー： 混在したコンテンツ：「https://hkhan194.github.io/tres-chic/」でのページHTTPS経由でロードされましたが、安全でないスクリプト 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'を要求しました。このリクエストはブロックされました。 HTTPS経由でコンテンツを配信する必要があります。

ソリューション：

• Googleのクロムを使用すると、JSのために言及しているURLからスクリプトの受け入れを許可されていないようです。
• mixItUp関数が元のJSファイルのものであるため、「mixItUpは関数ではありません」というエラーがスローされています。
• ですから、以下に示すように、特定のパスにあなたのGitHubの「jquery.mixitup.min.js」などのJavaScriptファイルとインデックスファイルにタグ内のJavaScriptが含まれていることを救うことができる、

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

Answer 2

まず、これは実際にGitHubページの質問ではありません。 GitHubページはあなたのファイルを単にホストします。これは本当にHTMLに関する質問です。

第2に、あなたがMCVEを投稿すると、あなたはもっと良い運があります。あなたの場合、これは単一の画像しか表示しない小さなテストページになります。言われていること

は、私は、結果のHTMLファイルに行くのをお勧めします：https://hkhan194.github.io/tres-chic/は

そのページの任意の場所を右クリックし、「エレメントを点検」に進みます。これにより、ページ要素を探索したり、エラーを確認したり、ネットワーク上で何が起きているかを見ることができるウィンドウが開きます。私はChromeを使用していますが、すべてのブラウザは非常に似ているはずです。

[ネットワーク]タブで、イメージファイルの一部が見つからないことに注意してください。これらはスペルミスの結果であると思われます：JPGまたはjpegの代わりにjpgのようなものです。

次に、[要素]タブで製品グリッドを探します。その高さは0であり、正しくはないようです。次に、div class="mix category-*"タグに移動して、すべてがdisplayのnoneであることに注意してください。

問題は、CSSが#Container .mixからdisplay:noneに設定されているため、CSSが表示されないことにあります。

このウィンドウを使用してページを探索する習慣に入り、GitHub PagesがやっていることとHTMLが何をしているかの違いを理解しようとしてください。さらに質問がある場合は、問題の範囲をより小さなサンプルページに絞り込んでください。がんばろう。私はIEとGoogle Chromeでリンクを試してみました@Hkhan