【HTML】画像を表示したい場合に使う、imgタグの使い方のご紹介！画像が表示されない場合の対処法もご紹介！

HTMLで、画像を表示したい場合には、imgタグを使います。

今回は、このimgタグについて解説していきます。画像が読み込まれない場合の対処法もご紹介していますので、是非ご覧ください。

画像を表示したい場合に使う、imgタグの使い方

画像を表示するには、imgタグを使用します。imgタグは、終了タグがないのが特徴です。

まずは、下記コードをご覧ください。

<img src="画像のパス" alt="代替テキスト">

お悩みさん

src？alt？何これ？

このように思った方は多いと思います。

これらは、src（ソース）属性とalt（オルト）属性と言って、この2つの属性は、原則として全てのimgタグに含める必要があります。重要ポイントですので、使い方をしっかり覚えましょう。

src属性には、表示したい画像のパスを入力します。

<img src="img/human.jpg" alt="代替テキスト">
<img src="img/submit-button.png" alt="代替テキスト">

こんな感じで、画像のパスを入れてあげればOKです。

ちなみに、指定できるファイルは下記の5種類です。

・jpg
・png
・gif
・svg
・pdf

alt属性とは、何らかの理由で画像が表示されなかった場合、代わりとして表示されるテキスト（代替テキスト）を指定できる属性です。

<img src="img/human.jpg" alt="人間">
<img src="img/submit-button.png" alt="送信ボタン">

こんな感じで、もし画像が表示されなかった場合のテキストを指定します。

指定したテキストは、下記のような感じで表示されます。

alt属性についてもっと詳しく知りたい方は、こちらの記事をご覧ください。

画像が表示されない場合は、下記を確認してみてください。

１番のあるあるパターンです。パスの階層を確認してみてください。

コンピュータは、残念ながら融通が効かないので、1文字でも間違っていると正しく読み込んでくれません。ファイル名のスペルミスがないかしっかり確認してみてください。

srcのスペルを、「scr」とかにしていませんか？？これだと、表示されません。

分かりにくいかもしれませんが、下記コードのように、imgとsrcの間のスペースが全角だと画像は表示されません。

<img　src="img/human.jpg" alt="人間">

スペースは、半角にしましょう。

imgタグは、HTMLでよく使うタグの1つです。使い方はそれほど難しくはないと思うので、覚えておいていただけると幸いです。