フォルダーから HTML に画像を追加する

1. <img> タグを使用して HTML のフォルダーから画像を追加する
2. CSS background-image プロパティを使用して、HTML のフォルダーから画像を追加する

この記事では、HTML のフォルダーから画像を追加するさまざまな方法について説明します。

<img> タグを使用して HTML のフォルダーから画像を追加する

システムにローカルに保存された画像がある場合は、簡単に HTML に追加できます。 <img> タグを使用して、src 属性で画像のパスを指定できます。

手順は簡単ですが、ウェブページに画像が表示されないことがあります。 この問題は、ほとんどの場合、画像のパスが正しくなく、ブラウザーが画像を見つけられないために発生します。

したがって、src 属性に正しい画像パスを設定する必要があります。

次の構造を考えてみましょう。

HTML_project
├── image1.jpg
└── index.html

ここでは、HTML ファイルと画像は同じディレクトリにあります。

たとえば、<img> タグを作成し、パス image1.jpg を記述して画像を挿入します。 alt 属性を使用して、代替テキストを追加できます。

場合によっては、画像が表示されないことがあります。 したがって、ユーザーに画像の内容を知らせることは理にかなっています。

画像が表示されている場合、代替テキストは表示されません。 <img> には終了タグがないことに注意してください。

コード例:

<img src="image1.jpg" alt="Mango Tree">

上記の例では、画像と HTML ファイルは同じパスにあります。 そのため、src 属性にはファイル名のみを記述しました。

イメージがディレクトリ内に保持されている別のシナリオを考えてみましょう。

HTML_project
├── images
│   └── image1.jpg
└── index.html

このような構造の場合、画像のパスを 2つの方法で設定できます。

コード例:

<img src="images/image1.jpg" alt="Mango Tree">

ここで、与えられたパスはブラウザに index.html が置かれているのと同じディレクトリで images という名前のディレクトリを探すように指示します。 次に、ブラウザは images ディレクトリを見つけ、その中に image1.jpg を見つけます。

したがって、画像はブラウザに表示されます。

コード例:

<img src="./images/image1.jpg" alt="Mango Tree">

ここで、パスの先頭にある./は、HTML_projectであるindex.htmlの場所から現在のディレクトリを示します。 次に、images ディレクトリが検索され、image1.jpg が Web ページに追加されます。

CSS background-image プロパティを使用して、HTML のフォルダーから画像を追加する

この方法は、HTML で画像を追加する別の方法を説明しています。 ただし、イメージ ファイル パスの規則は最初の方法と似ています。

唯一の違いは、<img> タグの代わりに CSS background-image プロパティを使用することです。

以下のような構造でCSSを使って画像をアップロードするコードを書いてみましょう。

HTML_project
├── image1.jpg
└── index.html

コード例:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

上記のコード スニペットは、高さと幅が 200px の背景画像を作成します。

同様に、次の構造を考えてみましょう。

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

コード例:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

ここで、../ は、ディレクトリ ツリーを 1つ戻ることを意味します。 これは、images ディレクトリから HTML_project ディレクトリに移動したことを意味します。このディレクトリには、images ディレクトリと、その中に image1.jpg ファイルがあります。

最後に、画像が表示されます。

これは、正しい画像パスで HTML と CSS を使用して、HTML のフォルダーから画像を追加する方法です。