Detailed graphic explanation of three methods of adding images to HTML pages-HTML Tutorial-php.cn

Detailed graphic explanation of three methods of adding images to HTML pages

yulia

Release： 2018-10-08 10:24:58

Original

33642 people have browsed it

When laying out a page, it is often necessary to insert pictures into the page. Do you know how to add pictures in HTML? This article will introduce to you three methods of inserting pictures into HTML pages. Friends who are interested can refer to it. I hope it will be helpful to you.

Method 1. Use the img tag in HTML to add images

The simplest and most commonly used is to use the img tag directly, and you can set the size of the image as needed. The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <img  src="img/picture1.jpg"/    style="max-width:90%" height="180px" alt="Detailed graphic explanation of three methods of adding images to HTML pages" >
 </body>
</html>

Copy after login

Rendering:

Detailed graphic explanation of three methods of adding images to HTML pages

Method 2. Use JavaScript to create an img element to import the image

First create an img element, then set the path of the img element, the length and width of the image, and finally insert it into the page. The code is as follows:

<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>

Copy after login

Method 3. Use innerHTML in JavaScript Dynamically insert images

Still use the method in JavaScript. The essence is similar to method 2, but the writing method is different. Create an img element and then add it to the HTML page. The code is as follows:

<script type="text/javascript">
  document.body.innerHTML = &#39;<img  src="img/picture1.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Detailed graphic explanation of three methods of adding images to HTML pages" >&#39;;
</script>

Copy after login

Picture The effect is the same as method one.

The above introduces three methods of adding pictures to HTML pages. Generally, we will directly use the img tag to add pictures, but sometimes JavaScript will be used to dynamically insert pictures. The specific method to choose depends on the needs of the project. Newbies can try it themselves, I hope it can help you!

The above is the detailed content of Detailed graphic explanation of three methods of adding images to HTML pages. For more information, please follow other related articles on the PHP Chinese website!