insérer une image avec un code Javascript

Comment insérer une image avec un code Javascript avec des exemples de code ?

1. Afficher l'image en HTML simple

Créez une balise d'image statique avec un attribut src avec une URL d'image dans le fichier HTML.

<img src= " https://picsum.photos/200/300" >

Ce qui donnera :

images

Comme vous pouvez le constater, j'ai utilisé le site picsum à des fins de démonstration. Il me permet d'obtenir une URL d'image aléatoire avec des dimensions spécifiques transmises à la fin de l'URL.

C'est plutôt simple n’est-ce pas ?

Voyons maintenant comment définir un attribut src de manière dynamique via JavaScript.

2. Définir l'attribut Src en JavaScript

En HTML, créez une balise d'image HTML comme suit :

<img/>

En JavaScript, obtenez une référence à la balise image en utilisant la méthode querySelector().

const img = document.querySelector("img");

Lire notre tutorial sur les variables en javascript.

const img = document.querySelector("img");

Ensuite, attribuez une URL d'image à l'attribut src de l'élément image.

img.src = "https://picsum.photos/200/301";

Vous pouvez également définir un attribut src à la balise image en utilisant la syntaxe des crochets au lieu de img.src comme ceci :
img["src"] = "https://picsum.photos/200/301"; Et voici le code :

Copier le code

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<h1></h1>
	<div id="monDIV">
	<img>
	</div>
	<script>
	const img = document.querySelector("img"); 
	img.src = "https://picsum.photos/200/301";
	</script>
	</body>
	</html>

3. Définir des attributs Src multiples en JavaScript

Disons que vous avez trois éléments d'image différents dans la page HTML.

En utilisant l'attribut ID ou class, vous pouvez facilement cibler chaque élément d'image séparément pour définir une valeur différente à l'attribut src, ce qui sera abordé plus tard dans ce chapitre.

Voici ce que vous devez NE PAS faire lorsque vous avez plusieurs balises d'images statiques sur votre page HTML. Dans l'exemple précédent, nous avons utilisé la méthode querySelector() pour cibler l'élément image, ce qui fonctionne bien pour un seul élément image.

Mais pour obtenir une référence aux trois éléments image, nous devons utiliser la méthode querySelectorAll(). La fonction querySelectorAll("img") permet de récupérer toutes les références des éléments image et de créer un tableau de listes de nœuds à partir de celles-ci.

Copier le code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>

<div id="monDIV">
<!--  // image 1 -->
<img>
...
<!-- // image 2 -->
<img> 
...
<!-- // image 2 -->
<img> 
</div>
<script>
const img = document.querySelectorAll("img"); 
img[0].src = "https://picsum.photos/200/301" ; // image 1
img[1].src = "https://picsum.photos/200/302" ; // image 2
img[2].src = "https://picsum.photos/200/303" ; // image 3
</script>
</body>
</html>

Cela fonctionne bien, mais il y a un problème avec cette approche.
Mais supposons que vous n'avez plus besoin du premier élément image et que vous le supprimez du code HTML.

Devinez quoi ?

Les deuxième et troisième éléments image se retrouveront avec les indices première et deuxième images.
Et notre code javascript a créé trois éléments image .
Cela va engendrer une erreur :

Uncaught TypeError: Cannot set properties of undefined (setting 'src')
at teste.html:23:12

Cette erreur nous dit que javascript a créé un src mais ne trouve pas où le placer dans notre document

pour contater cette erreur:

- Ouvrez la page d’exemple dans Chrome.
- Activer les outils de développement avec click droit puis cliquer sur inspecter dans votre page ou F12 (Mac: Cmd+Opt+I).
- Séléctionner l'anglet console

4. Créer un élément image en JavaScript

Créez un élément image en utilisant la méthode createElement() dans le document.
Ensuite, définissez l'URL de l'image dans son attribut src.
Exemple Dans cet exemple on va créer l'image dans le div avec l' id monDIV .

Copier le code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>

<div id="monDIV"></div>
<script>
var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
var src = document.getElementById("monDIV");
src.appendChild(img);

</script>
</body>
</html>

Le morceau de code ci-dessous fournit un résumé précis d’une méthode qui peut être utilisée pour résoudre le problème de l'insertion d'une image en se servant d’un code Javascript.

5. Ajouter un style en ligne à l'image en JavaScript

À l'aide de la propriété style, nous pouvons appliquer un style à l'élément image directement en JavaScript.

Comme dans l'exemple ci-dessous, on a appliqué un style de bordure ainsi qu'un style borderRadius.
Exemple appliquer un style css à l'image

Copier le code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>

<div id="monDIV">
</div>
<script>
let img = document.createElement("img");
img.src = "https://picsum.photos/200/301";

img.style.border = "10px solid blue";
img.style.borderRadius = "10px";

document.body.appendChild(img);
</script>
</body>
</html>

6. Ajouter l'attribut alt à l'image en JavaScript

Tout image doit avoir un texte descriptif ou cas où cette image ne s’affiche pas le texte alternatif serai affiché.
Ce texte est donné via l’attribut alt.

Exemple Le code javascript suivant ajoute l’attribut alt à notre image

Copier le code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>

<div id="monDIV">
</div>
<script>
let img = document.createElement("img");
img.src = "https://icsum.photos/200/301";

img.style.borderRadius = "10px";

img.alt="description de l'image";

document.body.appendChild(img);
</script>
</body>
</html>

Comme vous le constatez nous avons délibérément glissé une erreur dans l’URL de l’image pour que le texte alternatif s’affiche .

Vous pouvez également utiliser la méthode setAttribute() sur l'objet img avec deux arguments : le nom de l'attribut et sa valeur.

img.setAttribute("alt", "description de l'image");

7. Attacher un événement de click à l'élément image

Pour associer un événement de click à l'élément image, utilisez la méthode addEventListener() sur l'objet img.

Cette méthode prend deux arguments :

click = nom de l'événement et
function() {} = fonction de rappel.

Exemple :

Copier le code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>

<div id="monDIV">
Cliquer moi <br>
</div>
<script>
var img = document.createElement("img");
img.src = "https://picsum.photos/200/301";

img.addEventListener("click", function() {
	img.style.width = "400px" ;
})

document.body.appendChild(img);
</script>
</body>
</html>

Voir aussi Générer dynamiquement un lien avec JavaScript/jQuery

Sommaire