HTML で 画像 を 表示 する ～HTML <img src="表示させたい画像のURLかファイルパス">～

目的

• HTMLで画像を表示する方法をまとめる。

押さえるポイント

• imgタグを用いる。
• imgタグのsrc属性によって表示させる画像を指定する。
• 画像の指定にはURLかファイルパスを用いる。

書き方の例

<img src="表示させたい画像のURLかファイルパス">

注意するポイント

• imgタグではテキストをタグで囲む事がないため、終了タグが必要ない。
• 多くの属性が存在しており、画像の名前を指定することで画像検索などで表示させ安くすることも可能。
• 画像のサイズの変更も可能
• ローカル作成環境などで、ローカルの画像を表示したいときは相対パス(表示させたいHTMLファイルからの相対的なファイルパスの記載方法)を用いて画像を指定する。
  ※属性に関しては別記事でまとめます。
  ※画像サイズの変更に関しては別の記事でまとめます。

具体的な例

• HTMLの画面に画像を表示する。
• ウェブの表示画像はフリー画像サイト「いらすとや」にあるネオンテトラとする。
• ローカルの画像表示はhtmlファイルと同じ階層に「photo」フォルダを作成しその中に存在する「sumida_aquarium_1.JPEG」ファイルとする
  ※ローカル画像ファイルの場所が言葉のみだと分かりにくいため下記にフォルダ構成をまとめる。

# HTMLファイルが設置してあるフォルダ内の構成

HTMLファイル
photoフォルダ
    ┗sumida_aquarium_1.JPEG

～サンプルコード～

<!-- ウェブの表示画像 -->
<img src="https://1.bp.blogspot.com/-PjZz2WJ1Zj0/VMIvCILIJzI/AAAAAAAAq2w/bmdFdi5l4Z4/s800/fish_neontetra.png">

<!-- ローカルの表示画像 -->
<img src="./photo/sumida_aquarium_1.JPEG">

～プレビュー画面～
ウェブの表示画像

ローカルの表示画像