戻る

HTMLに<img>で画像を配置した際に、正しく表示できない場合は、以下のような点をチェックしてください。

1. 同じ場所に配置
   画像ファイルは原則HTMLファイルと同じ場所に配置してください。別々のフォルダに入っていると呼び出せません。
   ただし元記事のファイルの参照方法（パス）で説明する方法を使えば、別のフォルダに入っている物を呼び出せるようになります。
   良く分からない場合は、とりあえず HTMLファイルと、必要な画像ファイルは同じフォルダ内に置く、と覚えておいてください。
   
2. 圧縮フォルダの取り扱い
   もし圧縮フォルダにファイルを収めている場合は、そのままでは他のファイルを呼び出せません。特殊なデータ圧縮状態になっているからです。
   動作確認をするなら、関連ファイルをすべて圧縮フォルダの外に取り出した状態で行いましょう。
   

   内容を確認したい場合は取り出してから見ましょう。
   圧縮状態のままでは、正常に確認できません。
3. ファイル名は半角英数のみ
   画像やHTMLのファイル名には、半角英数字のみを使いましょう。ファイル名に記号類・スペース・全角文字などが含まれていると、正しく呼び出せません。くわしくは第２回の資料に掲載した基本ルールを確認し、基本ルールに従って画像ファイルの名前も決めてください。¹⁾

   <!-- ファイル名には 記号類・スペース・全角文字 などを使わないようにしましょう。
        以下は正しくない例です。 -->
   <img src="papa's chair.jpg">   <!-- ファイル名にスペースや「'」記号を含めるべきではありません -->
   <img src="日常風景.jpg">       <!-- ファイル名に全角文字を含めるべきではありません -->

4. ファイル名間違い・スペルミス
   <img src="abc.xyz">で指定する画像ファイルの名前が、実際のものと合っているか確認してください。
   もちろん <img src="～"> の部分にも間違いがないように。
   • ファイル名が異なっていると、正しく呼び出せません。大文字・小文字なども正確に書きましょう。可能ならコピー・貼り付けを使ってファイル名を入力すると確実でしょう。
   • <img>による画像ファイル名の指定に余分なスペースなどが含まれていないか確認しましょう。例えば下の例では、dog.jpgの後ろに余分なスペースが1つ含まれているせいで「dog.jpg 」というファイルが見つからないため、画像が表示できなくなります。

     <img src="dog.jpg ">

     コンピュータは間違いにはすごく敏感なのです。その代わり正確に書きさえすれば確実に仕事をこなしてくれます。

   • HTML中に全角スペースが紛れ込んでいると、多くの場合正しく動作しません。
     HTMLを入力する際は、日本語をＯＦＦにするか、F10キーで半角に変換するようにしましょう。
5. 画像のデータ形式
   画像ファイルのデータ形式は JPG PNG GIF のいずれかである必要があります。それ以外のデータ形式は、多くのブラウザが対応していません。
   もし画像のデータ形式を変換したい場合は、いったん画像編集アプリで対象の画像を開き、「保存」をする際にデータ形式を選択できます。正しいデータ形式で画像を保存し直しましょう。
   決してファイル名変更で拡張子を無理やり変えたりしてはいけません。見た目と実際のデータ形式に食い違いが発生し、さらに問題が複雑化してしまいます😂
   

画像が表示されない場合は、以上を参考にチェックしてみてください。

表示されないのには必ず理由があるので、原因を探しましょう。

戻る