画像がウェブサイトに表示されない理由とその解決方法
古い言葉は、 "絵は千語の価値がある"ということです。 これは特に注目を集めているWebサイトでは当てはまります。そのため、適切なイメージは実際の注意を引きつけ、ページ訪問者を魅了して特定のものを学び、具体的に実行するために必要なことを学び、サイトの「勝利」を示す行動。 はい、ウェブサイトの場合、イメージは実際には1000語以上の価値があります。
だから、オンライン画像の重要性が確立したら、サイト上にあるはずの画像が読み込まれないと、あなたのウェブサイトは何を言っているのでしょうか？ これは、CSSで適用されたHTMLイメージまたは背景イメージの一部であるインラインイメージを持っているかどうかに関係なく、どちらのイメージも存在します。 要点は、グラフィックスがページにロードされないと、デザインが壊れてしまい、場合によってはそのサイトのユーザーエクスペリエンスを完全に破壊する可能性があるということです。 絵が送っている「千の言葉」は確かに肯定的なものではありません！
画像がサイトに読み込まれない一般的な理由と、 ウェブサイトのテスト中にこの問題をトラブルシューティングする際に留意すべき点について見ていきましょう。
不適切なファイルパス
サイトのHTMLファイルまたはCSSファイルにイメージを追加する場合、そのファイルが存在するディレクトリ構造内の場所へのパスを作成する必要があります。 これは、ブラウザにイメージを検索して取得する場所を指示するコードです。 ほとんどの場合、これは 'images'という名前のフォルダの内部にあります。 このフォルダへのパスとその内部のファイルが正しくない場合、ブラウザは正しいファイルを取得できないため、イメージは正しく読み込まれません。 それはあなたが指示したパスに従いますが、それは行き止まりになり、適切なイメージを表示する代わりに空白になります。
画像ロードの問題をデバッグするには、コード化されたファイルパスが正しいことを確認する必要があります。 おそらく間違ったディレクトリを指定したか、そのディレクトリへのパスを正しくリストしていない可能性があります。 そうでない場合は、そのパスに別の問題がある可能性があります。 読む！
ファイル名のスペルミス
ファイルのファイルパスを調べるときに、イメージの名前のスペルが間違っていないことを確認してください。 私たちの経験では、不適切な名前やスペルミスが画像読み込みの問題の最も一般的な原因です。 覚えておいて、ウェブブラウザはファイル名に関しては非常に寛容です。 誤って手紙を忘れた場合や、間違った手紙を使用した場合、ブラウザは類似したファイルを検索せず、「ああ、おそらくこれを意味するでしょうか？」 いいえ - ファイルのスペルが間違っていると、たとえそれがクローズしていてもページにはロードされません。
間違ったファイル拡張子
場合によっては、ファイル名のスペルが正しくありますが、ファイルの拡張子が間違っていることがあります。 画像が.jpgファイルで、HTMLが.pngを探している場合は問題があります。 それぞれの画像に正しいファイルタイプを使用していることを確認してから、ウェブサイトのコードに同じ拡張機能が呼び出されていることを確認してください。
大文字と小文字の区別も調べます。 あなたのファイルが.JPGで終わっていて、すべてが大文字で、コードが.jpgで、小文字の場合は、それらが同じ文字セットであっても、異なる2つのWebサーバがあります。 大文字と小文字の区別が重要！ これは、ファイルをすべて小文字で保存する理由です。 そうすることで、私たちはコード内で常に小文字を使うことができ、画像ファイルで起こり得る問題を1つ取り除くことができます。
ファイルが見つからない
イメージファイルへのパスが正しく、名前とファイル拡張子にもエラーがない場合は、ファイルが実際にWebサーバーにアップロードされていることを確認してください。 サイトの立ち上げ時にそのサーバーにファイルをアップロードすることを無視することは、見落としやすい一般的な間違いです。
この問題をどうやって修正しますか？ それらのイメージをアップロードし、あなたのウェブページをリフレッシュすると、ファイルはすぐに表示されるはずです。 また、サーバー上の画像を削除して再アップロードすることもできます。 奇妙に見えるかもしれませんが、私たちはこの仕事を複数回見ました。 ファイルが破損することがあるので、この「削除と置き換え」メソッドは、最終的に役立ちます。
画像をホストしているウェブサイトがダウンしています
通常は、自分のサイトが自分のサーバーで使用するイメージをホストしたい場合がありますが、場合によっては他の場所でホストされているイメージを使用している可能性があります。 イメージをホストしているサイトがダウンすると、イメージもロードされません。
転送問題
イメージファイルが外部ドメインからロードされたものであろうと、自分自身からロードされたものであろうと、ブラウザによって最初に要求されたときにそのファイルに転送の問題が存在する可能性が常にあります。 これは一般的な出来事ではないはずです（ 新しいホスティングプロバイダを探す必要があるかもしれません）が、それは時々起こる可能性があります。
この問題の残念な点は、あなたがコントロールできない問題なので、実際には何もできないということです。 良いニュースは、一時的な問題であり、しばしばかなり迅速に解決されるということです。 たとえば、誰かが壊れたページを見て、それを更新すると、それだけで問題が修正され、画像が適切に読み込まれます。壊れた画像が表示されている場合は、ブラウザをリフレッシュして、あなたの最初の要求。
いくつかの最終的なノート
画像やローディングに関する懸念を考えるときは、 ALTタグとウェブサイトのスピードと全体的なパフォーマンスを適切に使用することも考慮する必要があります。
ALT、または "alternate text"タグは、イメージが読み込まれなかった場合にブラウザによって表示されるものです。 特定の障害を持つ人々が利用できるアクセシブルなウェブサイトを作成する上で重要な要素です。 サイト内のすべてのインラインイメージには適切なALTタグが必要です。 CSSで適用された画像はこの属性を持たないことに注意してください。
ウェブサイトのパフォーマンス、あまりにも多くの画像を読み込んだり、ウェブ配信に適切に最適化されていない巨人画像だけでも、読み込み速度に悪影響を及ぼします。 このため、サイトのデザインで使用するイメージの影響をテストし、サイトのパフォーマンスを向上させるために必要な手順を実行しながら、ウェブサイトプロジェクトに適した全体的なルックアンドフィールを作成してください。