Comment ajouter une image dans une page html en utilisant javascript ?

Daidalos June 10, 2019


Exemple de comment ajouter une image dans une page html en utilisant javascript

Ajouter une image avec javascript

On peut tout d'abord créer une variable image avec createElement("img"):

var img = document.createElement("img");

puis indiquer le nom de l'image (Note: si l'image n'est pas dans le même répertoire que le document html, on peut aussi specifier le chemin complet vers l'image par exemple './path_to_img/matplotlib-grid-02.png'):

img.src = "matplotlib-grid-02.png";

et enfin afficher l'image dans la page html

var block = document.getElementById("x");
block.appendChild(img);

Exemple de code en utilisant cette image

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";

    var div = document.getElementById("x");
    div.appendChild(img);
    //block.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

donne

Comment ajouter une image dans une page html en utilisant javascript ?

Changer le style de l'élément div

On peut ensuite par exemple modifier le style de la dic contenant l'image avec

div.setAttribute("style", "  ");

Code

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";

    var div = document.getElementById("x");
    div.appendChild(img);
    div.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

donne

Comment ajouter une image dans une page html en utilisant javascript ?

Changer le style de l'image

On peut aussi modifier le style de l'image avec

img.setAttribute("style", " ");

Exemple de code

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";
    img.setAttribute("style", "margin-top: 80px;");

    var div = document.getElementById("x");
    div.appendChild(img);
    div.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

donne

Comment ajouter une image dans une page html en utilisant javascript ?

Références

Liens Site
How do you insert an image in Javascript? quora
[Element​.set​Attribute()
](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) developer.mozilla.org
How TO - Add a Class stackoverflow
Add Style on image object using JavaScript in Canvas stackoverflow
How to add styling (CSS) to img tags in Javascript/Jquery stackoverflow
How to set style of image with html5? stackoverflow

Licence


Activity


Google Ads