HTML <img> src属性

HTML <img> タグ

定義と用法

必要 src 属性規定画像のURL。

属性に画像のURLを指定する方法は2種類あります。 src 属性にURLを指定：

1. 絶対URL - 他のウェブサイトにホストされている外部画像へのリンク。例えば：

src="https://www.codew3c.com/images/img_girl.jpg"

注意：外部画像は著作権保護されています。その使用許可を得られていない場合、著作権法を侵害する可能性があります。また、外部画像を制御することができず、突然削除されるか変更される可能性があります。

2. 相対URL - 網站内にホストされている画像へのリンク。

ここでは、URLにはドメインが含まれていません。URLが先頭にスラッシュがなく、ドメイン名が含まれていない場合、現在のページに対して相対的です。例えば：

src="img_girl.jpg"。

URLがスラッシュで始まる場合、ドメインに対して相対的です。例えば：

src="/images/img_girl.jpg"。

ヒント：相対URLを使用するのが最善かもしれません。ドメイン名を変更した場合、リンク切れが発生しません。

注意：ブラウザが画像を見つけられない場合、損傷したリンクアイコンとaltテキストが表示されます。

ヒント：ドキュメントの保存を整理するために、クリエイターは通常、画像ファイルを独立したフォルダーに保存し、これらのディレクトリを「pics」や「images」などの名前で呼びます。CodeW3C.comのオンラインチュートリアルでは、エンジニアが大部分の常用画像を「i」という名前のフォルダーに保存しています。「i」は「images」の省略で、この方法の利点はパスを最大限に簡略化できることです。

例

以下の例では、CodeW3C.comのエンジニアが上海の花港で撮影したチューリップの写真をページに挿入しました。この写真のファイル名は「eg_tulip.jpg」で、サーバー上の「i」フォルダーに保存されています。これはソースコードです：

<img src="/i/eg_tulip.jpg" />

上記のコードの効果：


自分で試してみる

ヒント：オンラインテストツールで自分で試してみる、例のファイル名を "eg_chinarose.jpg" に変更すると、一輪の花の写真が表示されます。こんな感じです：

ソースコード：

<img src="/i/eg_chinarose.jpg" />

上記のコードの効果：

構文

<img src="URL">

属性値

値 説明
URL

画像の URL を指定します。

可能な値：

  • 絶対的な URL - 別のサイトへのリンク（例：src="http://www.example.com/image.gif"）
  • 相対的な URL - サイト内のファイルへのリンク（例：src="image.gif"）

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML <img> タグ