HTML ページに画像を追加する 3 つの方法の詳細な図による説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML ページに画像を追加する 3 つの方法の詳細な図による説明

yulia

Oct 08, 2018 am 10:24 AM

ページをレイアウトするとき、多くの場合、ページに画像を挿入する必要があります。HTML に画像を追加する方法をご存知ですか?この記事ではHTMLページに画像を挿入する3つの方法を紹介しますので、興味のある方は参考にしていただければ幸いです。

方法 1. HTML で img タグを使用して画像を追加する

最も簡単で最も一般的に使用される方法は、img タグを直接使用することです。サイズを設定できます。コードは次のとおりです。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <img  src="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"  /    style="max-width:90%" height="180px" alt="HTML ページに画像を追加する 3 つの方法の詳細な図による説明" >
 </body>
</html>

ログイン後にコピー

レンダリング:

HTML ページに画像を追加する 3 つの方法の詳細な図による説明

方法 2. JavaScript を使用して、img 要素を作成します。 import the image

まず img 要素を作成し、次に img 要素のパス、画像の長さと幅を設定し、最後にそれをページに挿入します。コードは次のとおりです。 ##

<script type="text/javascript">
  var Image1 = document.createElement("img");    
  Image1.src = "img/picture1.jpg";      
  Image1.width = 300;    
  Image1.height = 180;    
  document.body.appendChild(Image1); 
 </script>

ログイン後にコピー

方法 3. JavaScript で innerHTML を使用する画像を動的に挿入する

引き続き JavaScript でメソッドを使用する本質は方法 2 と似ていますが、記述方法が異なります。 img 要素を作成し、それを HTML ページに追加します。コードは次のとおりです。

<script type="text/javascript">
  document.body.innerHTML = &#39;<img  src="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="HTML ページに画像を追加する 3 つの方法の詳細な図による説明" >&#39;;
</script>

ログイン後にコピー

Picture 効果は方法 1 と同じです。

上記では、HTML ページに画像を追加する 3 つの方法を紹介しました。通常は、img タグを使用して画像を追加しますが、動的に画像を挿入するために JavaScript を使用する場合もあります。プロジェクトのニーズ。初心者の方も自分で試してみてください。お役に立てれば幸いです。

以上がHTML ページに画像を追加する 3 つの方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。