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

Home

Web Front-end

HTML Tutorial

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

yulia

Oct 08, 2018 am 10:24 AM

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="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"  /    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="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"      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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn