HTML 画像ファイルを表示するサンプル

htmlの画像ファイルを表示するサンプルです。

目次

サンプル 画像ファイルを表示する
  画像ファイルがない時に文字を表示(alt)
  画像ファイルを相対パスと絶対パスで指定して開く

画像ファイルを表示する

<img src ="画像ファイル名">

画像ファイルの表示は、imgタグとsrcで画像ファイル名を指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <img src="test1.png" />
    <img src="./test1.png" />
    <image src="test1.png" />
  </body>
</html>

8,9行目は、このhtmlファイルと同じフォルダ内にある画像ファイルを指します。
10行目は、imgではなくimageにしています。表示できます。

ファイル名を囲むダブルコーテションは半角です。全角の場合、画像は表示されません。
エディタによっては判別しづらい場合があります。

 

画像ファイルがない時に文字を表示(alt)

alt属性は画像ファイルを取得できなかった時に指定された文字を表示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <img src="test11.png" alt="ファイル無" />
  </body>
</html>

8行目は、alt属性があります。画像ファイルを取得できなかった場合、「ファイル無」が表示されます。

 

画像ファイルを相対パスと絶対パスで指定して開く

画像ファイルを相対パスと絶対パスで指定して開くサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <img src="./img/test1.png"/>
    <img src="D:/Test1/img/test1.png"/>
  </body>
</html>

8行目は、相対パスです。このhtmlファイルが有るフォルダの配下のimgフォルダ内を指定しています。先頭のドット(.)は必要です。ないとファイルがないというエラーになります。

9行目は、絶対パスです。ドライブ名からパス、ファイル名まですべて記述します。

関連の記事

HTML labelタグでクリックできる範囲を広げる方法
HTML caption テーブルのタイトルを指定する

△上に戻る