Afficher l'image avec JavaScript

Pour afficher une image avec JavaScript, vous pouvez modifier le src d’un élément HTML <img> existant ou créer un élément image et l’ajouter à la page. Choisissez la première méthode pour remplacer une image sur place ; créez un nouvel élément pour ajouter une image à une galerie ou à un autre conteneur. Dans les deux cas, JavaScript modifie le DOM de la page, tandis que le navigateur charge l’image indiquée par sa source.

Modifier la source d’une image existante

Commencez par placer une image dans le HTML et attribuez-lui un identifiant. Un clic sur un bouton peut modifier sa propriété src. Cet exemple complet de page dans le navigateur suppose que image1.jpg et image2.jpg sont disponibles aux chemins indiqués, relatifs à la page :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Change an image</title>
  <img id="photo" src="image1.jpg" alt="A view of the coast">
  <button id="change">Show the second photo</button>
  <script>
    const photo = document.querySelector("#photo");
    document.querySelector("#change").addEventListener("click", () => {
      photo.src = "image2.jpg";
      photo.alt = "A view of the mountains";
    });
  </script>
</html>

La modification de src demande au navigateur de charger la nouvelle ressource ; elle ne remplace ni ne recharge toute la page. Modifiez aussi alt si la nouvelle image transmet un contenu significatif différent. Si l’image est décorative et que le texte voisin communique déjà la même information, utilisez une valeur alt vide plutôt que de répéter ce texte.

Créer et ajouter un nouvel élément image

Utilisez document.createElement("img") pour créer un élément <img>, définissez sa source et son texte alternatif, puis ajoutez-le au conteneur où il doit apparaître. L’exemple statique de page dans le navigateur ci-dessous utilise une fonction réutilisable et ajoute une image chaque fois que l’on clique sur le bouton. Il suppose que images/sunset.jpg est accessible depuis l’emplacement de la page.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Add an image</title>
  <button id="add">Add photo</button>
  <div id="gallery"></div>
  <script>
    function addImage(source, description, container) {
      const image = document.createElement("img");
      image.src = source;
      image.alt = description;
      container.appendChild(image);
    }

    const gallery = document.querySelector("#gallery");
    document.querySelector("#add").addEventListener("click", () => {
      addImage("images/sunset.jpg", "Sunset over the water", gallery);
    });
  </script>
</html>

width et height sont facultatifs. Définissez-les lorsqu’une taille d’affichage connue permet de réserver l’espace nécessaire dans la mise en page, ou dimensionnez l’image avec CSS. La propriété de largeur d’une image se mesure en pixels CSS. Pour les mises en page adaptatives, une règle CSS comme max-width: 100%; height: auto peut limiter l’image à la largeur de son conteneur tout en conservant ses proportions.

Exécutez cet exemple JavaScript pour voir comment un choix connu correspond à un chemin d’image. Il illustre de façon exécutable l’étape de sélection de la source ; les exemples de page dans le navigateur ci-dessus montrent les opérations sur le DOM.

const imagePaths = {
  coast: "images/coast.jpg",
  mountain: "images/mountain.jpg"
};
const selectedImage = imagePaths.coast;
console.log(selectedImage);

Afficher une image en fonction de la saisie de l’utilisateur

Pour une liste déroulante, attribuez à chaque option une valeur correspondant à un chemin d’image ou à une URL connue. Lisez la valeur sélectionnée et mettez à jour une image existante. Cet exemple de page dans le navigateur suppose que les deux fichiers se trouvent dans le dossier images/, relatif à la page :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Select an image</title>
  <label for="image-choice">Choose a scene:</label>
  <select id="image-choice">
    <option value="images/coast.jpg">Coast</option>
    <option value="images/mountain.jpg">Mountain</option>
  </select>
  <img id="preview" src="images/coast.jpg" alt="Coastal scene">
  <script>
    const choices = document.querySelector("#image-choice");
    const preview = document.querySelector("#preview");
    const descriptions = {
      "images/coast.jpg": "Coastal scene",
      "images/mountain.jpg": "Mountain scene"
    };

    choices.addEventListener("change", () => {
      preview.src = choices.value;
      preview.alt = descriptions[choices.value];
    });
  </script>
</html>

Les valeurs des options sont définies par la page ; l’utilisateur ne peut donc choisir qu’une source que vous fournissez. Si les valeurs proviennent d’une autre source, vérifiez qu’elles appartiennent à une liste autorisée avant de les affecter. Pour les téléversements de fichiers, utilisez un champ de sélection de fichier et créez une URL d’objet temporaire à partir du File sélectionné ; révoquez cette URL lorsqu’elle n’est plus nécessaire. Un chemin de fichier local saisi par l’utilisateur n’est généralement pas une URL que la page peut lire directement.

Gérer les chemins, le chargement et l’accessibilité

<img> est un élément HTML, pas une balise JavaScript. JavaScript crée sa représentation dans le DOM avec document.createElement ; src est la propriété qui indique la source de l’image (et correspond à l’attribut src), pas une méthode. Un chemin peut être relatif ou absolu. Les chemins relatifs sont résolus à partir de l’URL du document, qui peut différer du dossier où se trouve un fichier de script. Un chemin relatif à la racine commence à la racine du site ; une URL absolue comprend son schéma et son hôte.

Si une image est introuvable, examinez la valeur actuelle de son src dans les outils de développement du navigateur et ouvrez directement cette URL. Vérifiez l’orthographe, les majuscules et minuscules, l’URL de la page, le répertoire de déploiement, la réponse du serveur et les messages du réseau ou de la console. Une requête d’image échouée apparaît généralement sous la forme d’une image brisée et d’une erreur réseau ; elle est distincte d’une exception JavaScript, par exemple lorsque le code recherche un élément avant qu’il existe. Placez les scripts après le balisage concerné ou attendez que le DOM soit prêt avant de rechercher l’élément. Les événements load et error peuvent aussi aider à déterminer si le navigateur a récupéré et décodé l’image.

Rédigez un texte alt concis qui décrit le contenu utile de l’image, et non son nom de fichier ou son chemin. Une image provenant d’une autre origine peut souvent être affichée en affectant son URL à src ; les autorisations CORS sont pertinentes pour les opérations restreintes, comme la lecture des pixels d’une image d’une autre origine dans un canvas. Le serveur distant et les règles du navigateur déterminent tout de même si une ressource donnée peut être chargée.

FAQ

1. Comment modifier une image avec JavaScript ? Sélectionnez son élément <img> existant et affectez une nouvelle valeur à src. Modifiez alt si le sens de l’image change.
2. JavaScript peut-il ajouter plusieurs images ? Oui. Créez un élément <img> pour chaque source et ajoutez chacun à une galerie ou à un autre conteneur. Si les sources se trouvent déjà dans un tableau, utilisez une boucle.
3. Comment permettre à l’utilisateur de choisir l’image affichée ? Lisez la valeur d’une liste déroulante ou d’un autre contrôle dans son événement change, puis affectez une source autorisée au src de l’image d’aperçu.
4. Puis-je utiliser l’URL d’une image externe ? Oui, si l’URL est accessible et que le serveur autorise la requête du navigateur. Afficher une image seule ne nécessite généralement pas d’accès CORS ; la lecture de ses pixels dans un canvas est soumise à des restrictions inter-origines supplémentaires.
5. Pourquoi l’image n’apparaît-elle pas ? Vérifiez l’URL résolue et le nom du fichier, puis consultez les panneaux Réseau et Console du navigateur pour repérer une requête échouée ou une erreur de script. Assurez-vous que le fichier est déployé à l’emplacement visé par cette URL.