Maison > Article > interface Web > Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML
Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML
- yuliaoriginal
- 2018-10-08 10:24:5933592parcourir
Lors de la mise en page, vous devez souvent insérer des images dans la page. Savez-vous comment ajouter des images en HTML ? Cet article vous présentera trois méthodes pour insérer des images dans des pages HTML. Les amis intéressés peuvent s'y référer. J'espère qu'il vous sera utile.
Méthode 1. Utilisez la balise img en HTML pour ajouter des images
La plus simple et la plus couramment utilisée consiste à utiliser directement la balise img, et vous pouvez définir la taille de l'image selon les besoins. Le code est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/picture1.jpg"/ style="max-width:90%" height="180px" alt="Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML" > </body> </html>
Rendu :
Méthode 2. Utilisez JavaScript pour créer une image. élément pour importer l'image
Créez d'abord un élément img, puis définissez le chemin de l'élément img, la longueur et la largeur de l'image, et enfin insérez-le dans la page. Le code est le suivant :
<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>Méthode 3. Utiliser InnerHTML en insérant dynamiquement des images en JavaScript
utilise toujours la méthode en JavaScript L'essence est similaire à la méthode 2, mais la méthode d'écriture est. différent. Créez un élément img puis ajoutez-le à la page HTML. Le code est le suivant :
<script type="text/javascript"> document.body.innerHTML = '<img src="img/picture1.jpg" style="max-width:90%" style="max-width:90%" / alt="Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML" >'; </script>
L'effet d'image est le même que la méthode 1.
Ce qui précède présente trois méthodes pour ajouter des images aux pages HTML. Généralement, nous utiliserons directement la balise img pour ajouter des images, mais parfois nous utilisons également JavaScript pour insérer dynamiquement des images. besoins du projet. Les débutants peuvent l’essayer eux-mêmes, j’espère que cela pourra vous aider !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!