Afficher l'image avec JavaScript

Siddharth Swami 18 octobre 2021

JavaScript JavaScriptImage

JavaScript est connu comme le langage de développement Web. En utilisant JavaScript, nous pouvons rendre notre page Web attrayante en y insérant des images.

Par défaut, nous utilisons la balise <img> en HTML pour afficher les images. Dans la balise <img>, nous avons une méthode connue sous le nom de src, qui permet d’obtenir la source de l’image que nous avons donné à afficher. Dans le src, il faut donner le chemin complet de l’image ; sinon, cela générera une erreur. La largeur, la hauteur de l’image doivent également être spécifiées.

JavaScript a sa propre balise img, qui nous aide à insérer une image dans notre page Web. Nous pouvons créer une fonction réutilisable. Ici, nous utiliserons à nouveau l’élément img mais différemment.

Nous allons créer une fonction appelée display_image(), qui comprendra les paramètres tels que source, width, height et alt d’une image qu’il contient. Nous utiliserons un createElement() pour créer un élément dans la fonction. De cette façon, nous pouvons afficher dynamiquement des images partout où nous appelons cette fonction.

Par exemple,

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function display_image(src, width, height, alt) {
    var a = document.createElement("img");
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild(a);
}
display_image('JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage');
</script>
</body>
</html>

Production:

afficher l’image avec javascript

L’exemple ci-dessus affiche une image sur la page Web en fonction de la source fournie. La fonction document.body.appendChild() ajoute l’élément donné au corps de la page Web.