imgタグを使って画像を表示してみよう

画像を表示させたい場合には、

コードで表示したい画像がある場所を指定することで

ホームページ上に表示させることが出来ます。

ただし、正確に画像ファイルの場所指定が出来ていないと

エラーとなってしまうので注意が必要です。

画像を表示するコードは

コチラになります。

imgはイメージファイルを表していてsrc（ソース）で画像ファイル名を指定して

呼び出して表示するといった具合です。

この場合、同一フォルダ内に画像ファイルがないとエラーとなってしまいます。

sample.jpgのところがファイル名になるのでそこを自分の表示したい

画像ファイルの名前に変更しましょう。

拡張子はjpgでもgifでもpngでもなんでもOKです。

画像のサイズについては特に指定していなくても

自動で読み込んで表示してくれるのですが、

指定してあげたほうが処理に負担がかからないので

サイズがわかるのなら出来る限り指定してあげましょう。

というような感じになります。

この場合、widthが横幅pxでheightが高さpxです。

htmlファイルと同じ場所に画像ファイルがない場合には？

なお、画像ファイルとhtmlファイルが同じ場所にない場合には

srcで場所を指定してあげることで表示することができます。

表示させるhtmlファイルと同じ場所にフォルダがあり、

そのフォルダの中に画像ファイルがあるのであれば、

src="img/sample.jpg"

と指定してあげればimgフォルダの中に入っていると

教えることが出来るのです。

また、階層が上のフォルダに画像があるのであれば

一つ上のフォルダであれば

src="../sample.jpg"

二つ上のフォルダであれば、

src="../../sample.jpg"

といった感じに指定してあげれば表示することができます。

altを使って画像の説明をする

また、altというものもあります。

これは使っても特に見た目に変化はないのですが、

何か問題が起きて画像が表示されなかったときに

文字で表示してくれる機能のようです。

また、グーグルで画像検索をする際に

参照するとかしないとか・・・。

altを使うだけでGoogleからの評価も上がるようなので

これも出来るだけ使うようにしたほうが良いみたいです。

全てまとめるとこんな感じになります。

ネット上にある画像ファイルを表示する