HTML/CSS

    【エラー対処】画像が表示されない時

    趣味でWeb制作をやっています。

    エラーの解決メモです。

    <img src=”○○.jpg”>と指定しても、画像が表示されない時の対処方法についてご紹介します。

     

    画像が表示されない時

    imgタグでsrc=を指定しても画像が表示されない時は、以下の2点を確認してみてください。

    • 画像のファイル名が合っているか?
    • PNGがpngになっていませんか?

    pngとPNGは別物

     

    拡張子は、大文字と小文字が別物として認識されます。

    確認してみてください。

     

    別の画像が表示されてしまう

    画像のファイル名を変更したのに、画像が変わらない時ってありませんか。

     

    そんな時は、キャッシュを消去すると解決するかもしれません。

    キャッシュとは、ページを速く表示するために、パソコンが記憶しているデータのことです。

    一度訪れたWebページのデータ保存しておくことで、表示を速くしようとするパソコンの機能です。

     

    このデータが残っているために、画像のファイルを変更しても、前の画像から変わらない、という現象がおこることがあります。

     

    ・キャッシュの消去方法(GoogleChrome)

    GoogleChromeのキャッシュの消去方法をご紹介します。

    Webページの上で「右クリック」します。

    「検証」を選びます。

    ブラウザの「更新アイコン」を右クリックします。

    「キャッシュの消去とハード再読み込み」をクリックします。

    これでキャッシュが消去できます。

    すると、新しい画像が表示されていないでしょうか?

     

    今日のまなび

    Web制作時のエラーの解決法についてご紹介しました。

    まとめると、

    • pngPNGは、別物!
    • 画像が変わらない時は、キャッシュを消去してみること。

     

    それでは、また!