Helpful resources ▼
  Download   Pricing   Buy

Comment ajouter une image au code HTML – Exemples C#

Si les pages web ne contenaient que du texte, elles manqueraient d’attrait visuel et ne parviendraient pas à capter l’attention des utilisateurs. Les images et autres éléments médiatiques améliorent l’expérience de l’utilisateur en rendant le contenu plus attrayant, plus interactif et plus facile à comprendre.

Dans cet article, nous utiliserons des exemples C# pour montrer différentes façons d’insérer une image dans le code HTML à l’aide de la bibliothèque Aspose.HTML for .NET.

Pour obtenir des informations de base et des exemples HTML sur l’ajout d’images au format HTML à l’aide de la balise <img>, des arrière-plans CSS, de JavaScript et de l’encodage Base64, veuillez consulter l’article Ajouter une image au format HTML – De la syntaxe de base aux techniques avancées.

Ajouter une image au HTML

En utilisant la classe HTMLDocument, vous pouvez créer un élément <img>, définir des attributs tels que src, alt, width et height, et l’ajouter au document HTML, en le plaçant où vous le souhaitez.

Ajouter une image à un HTML vide

Si vous créez du HTML à partir de zéro et que vous souhaitez ajouter une image, vous devez suivre quelques étapes :

  1. Créer une instance de la classe HTMLDocument.
  2. Récupérer l’élément <body> en utilisant la méthode GetElementsByTagName().
  3. Créez un élément <img> en utilisant la méthode CreateElement().
  4. Définissez les attributs de l’image à l’aide de la méthode SetAttribute().
  5. Utilisez la méthode AppendChild() pour insérer l’élément <img> dans le corps du document.
  6. Enregistrer le document modifié dans un répertoire de sortie spécifié à l’aide de la méthode Save().
 1// Add image to HTML using C#
 2
 3// Create a new HTML document
 4using (HTMLDocument document = new HTMLDocument())
 5{
 6    // Get a reference to the <body> element
 7    HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
 8
 9    // Create an <img> element
10    var img = document.CreateElement("img");
11    img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Specify a link URL or local path
12    img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
13    img.SetAttribute("width", "128"); // Set parameters optionally
14    img.SetAttribute("height", "128");
15
16    // Add the <img> element to the <body>
17    body.AppendChild(img);
18
19    // Save file to a local file system
20    document.Save(Path.Combine(OutputDir, "add-image.html"), new HTMLSaveOptions());
21}
Example-AddImageToHTML.cs hosted with ❤ by GitHub

Ajouter une image à un code HTML existant

Vous pouvez insérer une image en la plaçant à l’endroit souhaité dans le code HTML. L’exemple C# suivant montre comment ajouter l’image après le deuxième élément <p> :

  1. Ouvrir un fichier HTML existant en utilisant la classe HTMLDocument.
  2. Utilisez la méthode GetElementsByTagName("p") pour collecter tous les éléments <p> du document HTML et les stocker dans une HTMLCollection.
  3. S’assurer qu’il existe au moins deux paragraphes avant de procéder aux modifications. L’instruction if s’assure que le document contient au moins deux éléments de paragraphe en vérifiant que paragraphs.Length >= 2.
  4. Utilisez la méthode CreateElement("img") pour générer un nouvel élément <img> et définir ses attributs src, alt, width et height.
  5. Récupère le deuxième élément <p> (paragraphes[1]) de la collection. Comme les collections en C# utilisent l’indexation basée sur le zéro, paragraphes[1] fait référence au deuxième élément <p> dans le document.
  6. Utilisez la fonction InsertBefore(img, secondParagraph.NextSibling) pour placer l’image nouvellement créée juste après le deuxième paragraphe.
  7. Enregistrer le document modifié dans un répertoire de sortie spécifié à l’aide de la méthode Save().
 1// Add image to existing HTML using C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "file.html")))
 5{
 6    // Get all <p> (paragraph) elements
 7    HTMLCollection paragraphs = document.GetElementsByTagName("p");
 8
 9    // Check if there are at least two paragraphs
10    if (paragraphs.Length >= 2)
11    {
12        // Create a new <img> element
13        var img = document.CreateElement("img");
14        img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Set image source (URL or local path)
15        img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
16        img.SetAttribute("width", "128");
17        img.SetAttribute("height", "128");
18
19        // Get the second paragraph
20        Element secondParagraph = paragraphs[1];
21
22        // Insert the image after the second paragraph
23        secondParagraph.ParentNode.InsertBefore(img, secondParagraph.NextSibling);
24    }
25
26    // Save the updated HTML document
27    document.Save(Path.Combine(OutputDir, "add-image-after-paragraph.html"), new HTMLSaveOptions());
28}
Example-AddImageToExistingHTML.cs hosted with ❤ by GitHub

Ce code C# charge un fichier HTML existant, récupère tous les éléments <p> et vérifie s’il y en a au moins deux. Si c’est le cas, il crée un nouvel élément <img>, définit ses attributs src, alt, width et height, et insère cette image après le deuxième paragraphe.

Images d’arrière-plan HTML

Il est facile d’insérer une image comme arrière-plan en HTML grâce à la propriété CSS background-image. Il existe plusieurs façons de définir la valeur de cette propriété. Vous pouvez utiliser des CSS en ligne, internes ou externes, et les images peuvent être au format PNG, JPG, GIF ou WebP.

Ajouter une image d’arrière-plan à l’aide de CSS internes

Si vous souhaitez ajouter une image d’arrière-plan à l’ensemble de la page web, vous pouvez définir la propriété CSS background-image sur l’élément <body> dans l’élément <style>. Par défaut, une image d’arrière-plan sera répétée si elle est plus petite que l’élément spécifié, dans ce cas, l’élément <body> :

1<head>
2    <style>
3        body {
4			background-image: url("background.png");
5		}
6    </style>
7</head>

Le code C# suivant vous permet d’ajouter une image d’arrière-plan à l’ensemble de la page à l’aide d’une feuille de style CSS interne. Il crée un élément <style> dans le document <head> avec une règle CSS qui définit une image de fond pour le <body> :

  1. Utilise la classe HTMLDocument pour charger un document HTML existant à partir du répertoire spécifié.
  2. Appeler la méthode CreateElement() pour créer un <style> pour le CSS interne.
  3. Utilisez la méthode CreateTextNode() pour créer une règle CSS afin de définir l’image d’arrière-plan.
  4. Utilisez la méthode “AppendChild()pour insérer le CSS en tant que texte dans l'élément