Home > Article > Web Front-end > Detailed graphic explanation of three methods of adding images to HTML pages
Detailed graphic explanation of three methods of adding images to HTML pages
- yuliaOriginal
- 2018-10-08 10:24:5933592browse
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>
Rendering:
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>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 = '<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" >'; </script>
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!