【HTML】画像挿入する方法（imgタグのsrc属性を利用する）

Contents

HTMLで画像を挿入するにはimgタグのsrc属性を利用します。

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

上記の画像ファイルは「https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png」にあります。

画像ファイルと同じディレクトリ内にHTMLが存在する場合は

<img src ="imgsrc.png">

で表示することができます。

同じディレクトリにない場合は画像は表示することはできません。

以下のように絶対パスを指定して画像を表示することができます。

<img src ="https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png">

alt属性を設定することで、画像が表示することができない場合（※画像が存在しない等）に設定したテキストが表示されます。

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

上記でファイルが存在しない場合は、以下のように表示されます。

//width:画像の幅を設定、height:画像の高さを設定
<img src ="ファイル名" width ="ピクセル数 または パーセント">

width属性を使用することで横幅を設定することができます。

例えば、次のように記述すると幅が縮小されることが分かります。

<img src="https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png" 
width="133" height="68">

↓通常表示時↓

↓幅、高さ調整後↓

オススメ記事