10 juin 2019 / Viewed: 10273 / Comments: 0 / Edit
Exemple de comment ajouter une image dans une page html en utilisant 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
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
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
Liens | Site |
---|---|
How do you insert an image in Javascript? | quora |
[Element.setAttribute() | |
](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 |
Je développe le présent site avec le framework python Django. Je m'intéresse aussi actuellement dans le cadre de mon travail au machine learning pour plusieurs projets (voir par exemple) et toutes suggestions ou commentaires sont les bienvenus !