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

Active 10 juin 2019    /    Viewed 27268    /    Comments 0    /    Edit


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() 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


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!



Did you find this content useful ?, If so, please consider donating a tip to the author(s). MoonBooks.org is visited by millions of people each year and it will help us to maintain our servers and create new contents.

Amount