Définit toutes les propriétés de bordure à gauche dans une déclaration
Dans ce tutoriel JavaScript, vous allez apprendre 6 scénarios courants que vous risquez de rencontrer, si ce n'est déjà fait, lorsque vous travaillez avec des images.
Dans ce chapitre, nous allons étudier comment trouver la réponse à la question "Comment insérer une image en utilisant le code Javascript".
<img src= " https://picsum.photos/200/300" >Ce qui donnera :
const img = document.querySelector("img");
const img = document.querySelector("img");
img.src = "https://picsum.photos/200/301";
Exemple : 📋 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>
Exemple : 📋 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>
Uncaught TypeError: Cannot set properties of undefined (setting 'src')
at teste.html:23:12
Exemple : 📋 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.
Exemple : 📋 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>
Exemple : 📋 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 .
img.setAttribute("alt", "description de l'image");
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
PROMO ! CLUB AFFILIATION FACILE : lien publicitaire affiché pendant 1 semaine sur plusieurs sites à fort trafic, partage des commissions 1TPE et SystemeIO, plus de 20000 produits.
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !