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 :

Créer une instance de la classe HTMLDocument.
Récupérer l’élément <body> en utilisant la méthode GetElementsByTagName().
Créez un élément <img> en utilisant la méthode CreateElement().
Définissez les attributs de l’image à l’aide de la méthode SetAttribute().
Utilisez la méthode AppendChild() pour insérer l’élément <img> dans le corps du document.
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> :

Ouvrir un fichier HTML existant en utilisant la classe HTMLDocument.
Utilisez la méthode GetElementsByTagName("p") pour collecter tous les éléments <p> du document HTML et les stocker dans une HTMLCollection.
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.
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.
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.
Utilisez la fonction InsertBefore(img, secondParagraph.NextSibling) pour placer l’image nouvellement créée juste après le deuxième paragraphe.
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> :

Utilise la classe HTMLDocument pour charger un document HTML existant à partir du répertoire spécifié.
Appeler la méthode CreateElement() pour créer un <style> pour le CSS interne.
Utilisez la méthode CreateTextNode() pour créer une règle CSS afin de définir l’image d’arrière-plan.
Utilisez la méthode AppendChild() pour insérer le CSS en tant que texte dans l’élément <style>.
Utilisez le QuerySelector() pour trouver l’élément <head>. S’il est manquant, appelez CreateElement() pour générer un nouvel élément <head> et l’insérer avant <body>.
Appelez la méthode AppendChild() pour ajouter l’élément <style> à l’intérieur de <head>.
Enregistrer le document modifié dans un répertoire de sortie spécifié à l’aide de la méthode Save().

 1// Add a background image to HTML using C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document.html")))
 5{
 6    // Create a new <style> element
 7    HTMLStyleElement styleElement = (HTMLStyleElement)document.CreateElement("style");
 8
 9    // Define CSS for background image
10    string css = "body { background-image: url('background.png'); }";
11    styleElement.AppendChild(document.CreateTextNode(css));
12
13    // Get the <head> element or create one if missing
14    HTMLElement head = document.QuerySelector("head") as HTMLElement;
15    if (head == null)
16    {
17        head = document.CreateElement("head") as HTMLElement;
18        document.DocumentElement.InsertBefore(head, document.Body);
19    }
20
21    // Append the <style> element to the <head>
22    head.AppendChild(styleElement);
23
24    // Save the updated HTML document
25    document.Save(Path.Combine(OutputDir, "add-background-image-to-entire-page.html"));
26}

Example-AddBackgroundImageToHTML.cs hosted with ❤ by GitHub

La figure montre un fragment de la page web avec une image de fond pour toute la page. L’image est répétée pour remplir tout l’écran :

Texte “Texte “Hello, World !” sur un fond bleu doux répété avec une éclaboussure d’eau créant un effet d’ondulation circulaire”

Note: Lorsque vous utilisez la propriété background-image, l’image d’arrière-plan sera répétée par défaut si elle est plus petite que le conteneur de l’élément spécifié, dans ce cas, l’élément <body>. Vous pouvez contrôler le positionnement d’une image d’arrière-plan et ajuster son échelle à l’aide de diverses propriétés CSS :

background-position spécifie la position de départ de l’image d’arrière-plan (par exemple, center, top left, 50% 50%).
background-size définit la taille de l’image de fond, en autorisant des valeurs comme cover, contain, ou des dimensions spécifiques (par exemple, 100px 200px).
background-repeat détermine si l’image d’arrière-plan se répète (par exemple, repeat, no-repeat, repeat-x, repeat-y).

Ces propriétés permettent de s’assurer que l’image d’arrière-plan s’affiche correctement en fonction de la taille de l’écran et de la mise en page.

Ajouter une image de fond à l’élément HTML

Considérons le cas de l’ajout d’une image d’arrière-plan pour un élément HTML séparé, par exemple pour l’élément h1. Pour éviter que l’image d’arrière-plan ne se répète, nous spécifions la propriété background-repeat.

 1// Apply background image to heading <h1> with C# and CSS
 2
 3// Load the existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document-with-h1.html")))
 5{
 6    // Create a new <style> element
 7    HTMLStyleElement styleElement = (HTMLStyleElement)document.CreateElement("style");
 8
 9    // Define CSS to apply a background image to all <p> elements
10    string css = "h1 { background-image: url('background.png'); background-repeat: no-repeat; padding: 60px;}";
11    styleElement.AppendChild(document.CreateTextNode(css));
12
13    // Get the <head> element or create one if missing
14    HTMLElement head = document.QuerySelector("head") as HTMLElement;
15    if (head == null)
16    {
17        head = document.CreateElement("head") as HTMLElement;
18        document.DocumentElement.InsertBefore(head, document.Body);
19    }
20
21    // Append the <style> element to the <head>
22    head.AppendChild(styleElement);
23
24    // Save the updated HTML document
25    document.Save(Path.Combine(OutputDir, "add-background-image-to-h1.html"));
26}

Example-AddBackgroundImageToH1Element.cs hosted with ❤ by GitHub

La figure montre un fragment de la page web – un fichier HTML avec une image de fond pour l’élément <h1> :

Texte “Texte “Bonne journée !” sur un fond bleu doux avec une éclaboussure d’eau créant un effet d’ondulation circulaire”

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

Ce qui suit montre comment ajouter une image d’arrière-plan à un élément <body> en utilisant le CSS en ligne – l’attribut style avec la propriété CSS background-image à l’intérieur de l’élément <body> :

1<body style="background-image: url('flower.png');"> Content of the document body </body>

 1// Add background image with CSS in C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document.html")))
 5{
 6    // Get the <body> element
 7    HTMLElement body = document.QuerySelector("body") as HTMLElement;
 8
 9    if (body != null)
10    {
11        // Set a background image using inline CSS
12        body.SetAttribute("style", "background-image: url('flower.png');");
13    }
14
15    // Save the updated HTML document
16    document.Save(Path.Combine(OutputDir, "add-background-image.html"));
17}

Example-AddBackgroundImageToHTMLUsingInlineCss.cs hosted with ❤ by GitHub

Résumé et recommandations

L’ajout d’images à l’aide de la balise <img> ou d’images d’arrière-plan via CSS améliore visuellement et structurellement le contenu du site web. Choisissez la méthode appropriée selon que l’image est décorative ou essentielle au contenu.
La classe HTMLDocument offre une grande flexibilité pour l’édition dynamique du contenu HTML. Vérifiez toujours si les éléments requis (head, body, p, etc.) existent avant de les modifier, par exemple en ajoutant des propriétés CSS.
L’utilisation de CSS internes (l’élément <style>) est une approche structurée pour définir les images d’arrière-plan, ce qui permet de garder le HTML plus propre et les styles centralisés. Le CSS en ligne (l’attribut style) est une alternative pour les cas simples.
Utilisez les propriétés CSS telles que background-size, background-repeat et background-position pour vous assurer que les images s’adaptent bien aux différentes tailles d’écran.

Voir aussi

Dans l’article Ajouter une image au HTML – De la syntaxe de base aux techniques avancées, vous découvrirez différentes méthodes pour ajouter des images, notamment l’utilisation de la balise <img>, les images d’arrière-plan CSS, le JavaScript et l’encodage Base64.

L’article Éditer un document HTML vous donne des informations de base sur la manière de lire ou de modifier le modèle d’objet de document (DOM). Vous découvrirez comment créer un élément HTML et comment l’utiliser à l’aide d’Aspose.HTML for .NET.

Aspose.HTML propose des applications Web HTML gratuites qui constituent une collection en ligne de convertisseurs, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. C’est un moyen rapide et facile de résoudre efficacement vos tâches liées au HTML.

Comment modifier la couleur de la bordure Comment utiliser le sélecteur CSS