HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）

この記事では主にHTMLのimgタグのsrc属性とその定義の一部を紹介します。 HTML img src 属性の使用手順といくつかの例。次に見てみましょう。

まず、img タグの定義を見てみましょう:

画像は Web ページで最も一般的な HTML 要素でもあり、非常に重要な部分です。 HTML Web ページでは、画像は タグで定義されます。これには属性のみが含まれ、終了タグは含まれません。

img タグの src 属性の定義:

タグの src 属性は必須です。その値は画像ファイルの URL であり、画像を参照するファイルへの絶対パスまたは相対パスです。

ヒント: ドキュメントのストレージを整理するために、作成者は通常、画像ファイルを別のフォルダーに保存し、これらのディレクトリに「pics」や「images」などの名前を付けます。 W3School オンライン チュートリアルでは、エンジニアは一般的に使用されるほとんどの画像を「i」という名前のフォルダーに保存します。これは、パスを最大限に簡素化できるという利点があります。 。

src 属性はインポートされた画像のアドレスです。これがなければ タグは意味がありません。

HTML img タグの src 属性の形式:

<img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy"   alt="图片描述">

説明: 画像アドレス: 画像が保存されている場所、画像の説明: 画像が表示できない場合の説明。を押すと説明が表示されます。

HTML img タグの src 属性の使用手順:

src 属性にサーバー側リソースのアドレスを直接与えると、img コントロールが自動的にリソースを取得して解析します。

画像と HTML テキストは同じディレクトリにあります: たとえば、index.html と img.jpg

書き込み:

画像と HTML は同じディレクトリにありません:これは 2 つの状況です:

1. 画像 img.jpg はフォルダー image 内にあり、index.html フォルダーとimages フォルダーは同じディレクトリ内にあります

書き込み:

2. 画像 img.jpg は image フォルダーにあり、index.html はコントローラー フォルダーにあり、画像とコントローラー フォルダーは同じディレクトリにあります

書き込み:

ソースがインターネットからのものである場合は、絶対パスを使用する必要があります

書き方:

画像がない場合は参照してください。ブラウザでは代わりに alt でテキストが表示されます。

<img src="/static/imghw/default1.png"  data-src="lib/img/imgDef.png"  class="lazy"   alt="暂无图片" />

img の src 属性の画像パスを使用する方法:

1.html ファイルと *.jpg ファイル (F ドライブ) は別のディレクトリにあります:

<img  src="/static/imghw/default1.png"  data-src="file:///f:/*jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）" >

2.html ファイルと *。 jpg 写真は同じディレクトリにあります:

<img  src="/static/imghw/default1.png"  data-src=".jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）" >;

3.html ファイルと *.jpg 写真は別のディレクトリにあります:

a. 写真 *.jpg は画像フォルダーにあり、*html と画像は同じディレクトリにあります。 :

<img  src="/static/imghw/default1.png"  data-src="image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）" >

b .画像 *jpg は image フォルダーにあり、*html は connage フォルダーにあり、画像と connage は同じディレクトリにあります:

<img  src="/static/imghw/default1.png"  data-src="../image/*jpg/"  class="lazy"     style="max-width:90%"  style="max-width:90%"/ alt="HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）" >

4 画像がインターネットから来た場合は、次のように記述します。絶対パス:

<img  src="/static/imghw/default1.png"  data-src="http://image.php.cn/pcindexhot"  class="lazy"  /   style="max-width:90%"  style="max-width:90%"/ alt="HTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）" >

HTML imgタグ src属性の属性:

【編集者のおすすめ】

HTMLテーブルのヘッダーコンテンツを中央に配置するにはどうすればよいですか?ヘッダー タグの align 属性の詳細な紹介

html なぜ P タグは div をネストできないのですか? HTML PタグのCSSスタイルの例もあります

以上がHTMLのimgタグのsrc属性の使い方は何ですか？具体的な利用方法の分析（事例添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。