1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【HTML入門】ホームページの画像が表示されない原因とその対処法

【HTML】画像が表示されない
Pocket

自分のホームページをインターネット上で公開するため、サーバーにファイルをアップロードしたところ、画像が表示されなかったことはないでしょうか。今回は、画像が表示されない原因とその解決策を紹介します。

imgタグの記述を間違えている

画像を挿入するためのimgタグは以下のように記述する必要があります。書いたコードが間違っていないか確認してみて下さい。

(ファイルパスは画像がある場所+ファイル名で表すことができます。)

画像ファイルのパスを間違えている

画像ファイルのパスが file://~ となっているものは、ローカルつまり自分のパソコンでは確認できますが、インターネット上では見ることができません。画像ファイルへのパスは相対パスか絶対パスで記述する必要があります。
相対パス・・・あるファイルから別のファイルのパスを指定する
(例)

絶対パス・・・インターネット上のファイルの住所を指す
(例) 

ファイル名を間違えている

ファイル名が間違っていないか、以下の項目を確認してください。

全角文字が含まれている

全角(日本語、アルファベット)で入力すると、画像が表示されません。全て半角で記述してください。
(例) purosuta.jpg プロスタ.jpg

大文字と小文字を間違えている

インターネット上ではファイル名の大文字と小文字は区別されます。PUROSUTA.JPGとpurosuta.jpgは別のファイルだと認識されます。

ファイル名にスペースが混ざっている

(例) puro suta.jpg

拡張子を付け忘れている

(例) purosuta

使用できない画像の拡張子を使っているor画像ファイルが壊れている

画像の表示形式を確認してみてください。一般的に、ブラウザが対応している画像の形式はjpg形式、gif形式、png形式です。また、ファイルの中身が見た目と異なる場合があります。例えば、gif形式の画像の拡張子をjpgに書き換えただけでは、ファイル形式の変換は行われません。
ブラウザで画像ファイルを開き、画像が表示されるかチェックしてみましょう。ブラウザ上で画像が表示されないときは、ファイルが壊れているか保存形式が間違っているかもしれません。

画像ファイルをサーバーにアップロードできていない

画像ファイルのアップロードが完了していないか別のディレクトリにアップロードした可能性が考えられます。画像をアップロードした場所と、ファイルの中で指定した画像の呼び出し場所が一致しているか確認する必要があります。以下のURLを入力し、画像が表示されるか確かめてください。

バイナリーモードで画像ファイルを転送していない

画像ファイルはバイナリーモードで転送する必要があり、アスキーモードまたはテキストモードでファイルを転送すると画像が表示できません。ご使用のFTPソフトの設定をバイナリーモードにしてください。

Webサーバが混雑している

サーバーが混み合っているために、画像が表示されないことがあります。その場合、とりあえずページを再度読み込み、時間をおいてから見ると表示されるかもしれません。

セキュリティソフトが邪魔をしている

セキュリティソフトによって、ホームページの画像が表示されない可能性があります。お使いのセキュリティソフトを一時的に停止し、再度お試しください。

【オススメ記事】
➡︎【HTML】スペース(空白)を表示させる3つの方法
➡︎ HTMLとCSSの文法チェックツール5選
➡︎ プログラミング入門講座①「HTMLとは〜概要と基本構造〜」
➡︎ 無料で使える!HTMLの学習サイトBEST7
➡︎ HTMLの本・参考書の評判

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る