画像を表示する

導入

画像は <img> で表示します。中身のない 空要素 で、どの画像を出すかは src 属性で指定します。

説明

• src … 画像の場所（URL やファイルパス）
• alt … 画像が表示できないときの代替テキスト（読み上げにも使われる大切な属性）
• width … 幅（ピクセル）

<img src="https://picsum.photos/200" alt="サンプル画像" width="200">

alt は「画像が見えない人・読み込めない状況」のための説明です。飾りでない画像には必ず付けます。

やってみよう

上の例を打ち込み、プレビューに画像が出ることを確かめましょう。src を存在しないURLに変えると、代わりに alt の文字が出ることも見てみてください。

演習

src に https://picsum.photos/150、alt に「風景」を指定した画像を表示してください。