HTMLのimgタグ Web ページ上に画像を表示するために使用されます。 HTML img タグは属性のみを含む空のタグであり、HTML 画像要素では終了タグは使用されません。

HTML画像の例を見てみましょう。

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

出力：

HTMLのimgタグの属性

src と alt は HTML img タグの重要な属性です。 HTML イメージ タグのすべての属性を以下に示します。

1) ソース

これは、画像のソースまたはパスを説明する必須の属性です。これは、サーバー上の画像を検索する場所をブラウザーに指示します。

イメージの場所は、同じディレクトリ上または別のサーバー上にある場合があります。

2) すべて

alt 属性は、画像が表示できない場合の代替テキストを定義します。 alt 属性の値は、画像を言葉で説明します。 alt 属性は SEO の観点から優れていると考えられています。

3) 幅

これは、画像を表示する幅を指定するために使用されるオプションの属性です。現在は推奨されていません。 width 属性の代わりに CSS を適用する必要があります。

4) 高さ

h3は画像の高さです。 HTML の高さ属性は、iframe、image、および object 要素もサポートします。現在は推奨されていません。 height 属性の代わりに CSS を適用する必要があります。

ランタイムエラー

img タグでの height 属性と width 属性の使用

Web ページに画像を挿入する方法について学習しました。要件に応じて画像を表示するために高さと幅を指定したい場合は、画像の高さと幅の属性を使用して設定できます。

例：

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

出力：

注: 常に高さと幅を指定して画像を挿入するようにしてください。そうしないと、Web ページに表示中にちらつく可能性があります。

alt属性の使用

alt 属性を使用できます 鬼ごっこ。ブラウザ上で画像が表示できない場合に代替テキストを表示します。 alt 属性の例を次に示します。

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

出力：

別のディレクトリ/フォルダーから画像を取得するにはどうすればよいですか?

Web に画像を挿入するには、その画像が HTML ファイルを配置したフォルダーと同じフォルダーに存在する必要があります。ただし、場合によっては画像が他のディレクトリにある場合は、次のようにして画像にアクセスできます。

上記のステートメントでは、イメージをローカル ディスク E------>images フォルダー------>img/html-tutorial/39/html-image-2.webp に配置しました。

注: src URL が間違っていたりスペルが間違っていると、Web ページに画像が表示されないため、正しい URL を入力するようにしてください。

使用 リンクとしてタグを付ける

画像を他のページにリンクしたり、画像をリンクとして使用したりすることもできます。これを行うには、次のようにします 中のタグ 鬼ごっこ。

例：

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

出力：

サポートするブラウザ

要素	クロム	IE	Firefox	オペラ	サファリ
	はい	はい	はい	はい	はい