画像表示とURL

画像のURLを変更することで、画像とURLの関係を体感します。（画像はAIで生成。）

以下、操作説明

ステップ１：右上の三点リーダー（のようなアイコン）→「その他のツール」→「ディベロッパー ツール」もしくは「開発者ツール」

ステップ２：画面右側の、Edgeなら「＜／＞」のマークのタブ、 Chromeなら「Elements」タブをクリック

ステップ３：「div」タグを開いていって「img」タグを探す。 「aigenerated_cat.jpg」をダブルクリック。

ステップ４：次のように変更する。 「aigenerated_cat.jpg」→「aigenerated_dog.jpg」

解説１：「aigenerated_cat.jpg」という部分はURLの相対URLと呼ばれる書き方です。 いま表示している静的なWebサイトでは画像ファイルのファイル名と同じになります。

解説２：「aigenerated_cat.jpg」というファイル名の画像を指定している箇所を、 「aigenerated_dog.jpg」というファイル名の画像に変更しました。 そのため、表示される画像が変更されました。

解説３：「aigenerated_dog.jpg」を「aigenerated_cow.jpg」としてみよう。 変なアイコンが表示されたね。これは「画像ファイルが無い」ことを示すアイコンです。 ファイルの名前を「cow（牛）」としても牛は表示されません。 「aigenerated_cat.jpg」と「aigenerated_dog.jpg」は事前にファイルとして存在しているので表示できます。