HTMLでローカル画像パスを参照する方法

html ローカル画像パスを参照する方法: 1. 相対パスを使用します。画像と HTML ファイルが同じフォルダーにある場合は、画像のファイル名を相対パスとして直接使用できます。2. を使用します。絶対パス: ローカル画像を参照するには絶対パスを使用しますが、絶対パスはさまざまな環境で問題を引き起こす可能性があるため、通常はベストプラクティスではありません; 3. Base64 エンコーディングを使用します: Base64 エンコーディングは画像をテキスト文字列に変換する方法です 画像データを埋め込むHTML に直接入力します。

#この記事の動作環境: Windows 10 システム、Dell G3 コンピューター。

HTML でローカル画像パスを参照するにはいくつかの方法があります。以下で詳しく紹介します。

相対パスを使用する:

相対パスは、現在の HTML ファイルの場所を基準とした相対パスです。画像と HTML ファイルが同じフォルダーにある場合は、画像のファイル名を相対パスとして直接使用できます。たとえば、画像ファイルの名前が「image.jpg」の場合、次のコードを使用して HTML で画像を参照できます。

<img src="image.jpg" alt="图片">

画像ファイルが現在のフォルダーの上位フォルダーにある場合、 HTML ファイルでは、「… /」を使用して上位フォルダーを表すことができます。たとえば、画像ファイルが上位フォルダーの「images」フォルダーにある場合、次のコードを使用して画像を参照できます。

<img src="../images/image.jpg" alt="图片">

同様に、画像ファイルが現在の HTML ファイルの下位フォルダーの場合は、「./」を使用して現在のフォルダーを表すことができます。たとえば、画像ファイルが現在のフォルダーの「images」フォルダーにある場合、次のコードを使用して画像を参照できます:

<img src="./images/image.jpg" alt="图片">

絶対パスを使用します:

絶対パスはルートディレクトリからのフルパスです。絶対パスを使用してローカル イメージを参照することもできますが、絶対パスはさまざまな環境で問題を引き起こす可能性があるため、これは一般的にベスト プラクティスではありません。ただし、どうしても絶対パスを使用する必要がある場合は、次のコードを使用してイメージを参照できます。

<img src="/path/to/image.jpg" alt="图片">

ここで、「/path/to/」は、ルート ディレクトリを基準としたイメージ ファイルの相対パスです。 。

Base64 エンコードを使用する:

Base64 エンコードは、画像をテキスト文字列に変換する方法であり、画像データを HTML に直接埋め込むことができます。この方法は、小さな画像や HTTP リクエストを減らす必要がある場合に適しています。次のコードを使用して、画像を Base64 エンコードに変換できます。

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA6RXhpZgAATU0AKgAAAAgABwEAAAQAAABsAAAABAAQAAA
EBAAABAAAAABsAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAAB9AD/2wBDAAoHBwkHBgoJ

このうち、「data:image/jpeg;base64」以降の部分が画像の Base64 エンコードです。この方法では HTML ファイルのサイズが増加し、ページの読み込み速度に影響を与える可能性があることに注意してください。

どの方法を使用する場合でも、指定したパスにイメージ ファイルが存在し、そのパスが正しいことを確認する必要があります。さらに、管理とメンテナンスを容易にするために、画像ファイルを HTML ファイルと同じフォルダー、または特別な画像フォルダーに配置することをお勧めします。

以上がHTMLでローカル画像パスを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。