Как добавить изображение в HTML? – C#

Если бы веб-страницы содержали только текст, они были бы лишены визуальной привлекательности и не смогли бы эффективно вовлечь пользователей. Изображения и другие медиаэлементы повышают удобство работы пользователей, делая контент более увлекательным, интерактивным и легким для восприятия.

В этой статье мы на примерах C# покажем различные способы вставки изображения в HTML с помощью библиотеки Aspose.HTML for .NET.

Основную информацию о том, как добавлять изображения в HTML с помощью тега <img>, фонов CSS, JavaScript и кодировки Base64, вы можете найти в статье Добавить изображение в HTML – от базового синтаксиса до продвинутых техник.

Добавить изображение в HTML

Используя класс HTMLDocument, вы можете создать элемент <img>, задать ему атрибуты src, alt, width и height и добавить его в HTML-документ, разместив там, где вам нужно.

Добавить изображение в пустой HTML

Если вы создаете HTML с нуля и хотите добавить изображение, вам следует выполнить несколько шагов:

Создайте экземпляр класса HTMLDocument.
Извлеките элемент <body> с помощью метода GetElementsByTagName().
Создайте элемент <img> с помощью метода CreateElement().
Установите атрибуты изображения с помощью метода SetAttribute().
С помощью метода AppendChild() вставьте элемент <img> в тело документа.
Сохраните измененный документ в указанный выходной каталог с помощью метода 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

Добавить изображение в существующий HTML

Вы можете вставить изображение, поместив его в нужное место в существующем документе HTML. В следующем C# примере показано, как добавить изображение после второго элемента <p>:

Откройте существующий HTML-файл с помощью класса HTMLDocument.
С помощью метода GetElementsByTagName("p") соберите все элементы <p> в HTML-документе и сохраните их в коллекции HTMLCollection.
Убедитесь, что существует как минимум два абзаца, прежде чем приступать к редактированию. Оператор if гарантирует, что документ содержит по крайней мере два элемента абзаца, проверяя, что paragraphs.Length >= 2.
С помощью метода CreateElement("img") создайте новый элемент <img> и установите его атрибуты src, alt, width и height.
Извлеките из коллекции второй элемент <p> (paragraphs[1]). Поскольку коллекции в C# используют индексацию, начиная с нуля, paragraphs[1] означает второй <p> элемент в документе.
С помощью InsertBefore(img, secondParagraph.NextSibling) поместите вновь созданное изображение сразу после второго абзаца.
Сохраните измененный документ в указанный выходной каталог с помощью метода 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

Этот код на C# загружает существующий HTML-файл, извлекает все элементы <p> и проверяет, есть ли среди них хотя бы два. Если да, то создается новый элемент <img>, устанавливаются его атрибуты src, alt, width и height. Затем изображение вставляется в документ после второго абзаца.

Фоновые изображения HTML

Вставить изображение в качестве фона в HTML очень просто с помощью свойства CSS background-image. Существует несколько способов задать значение этого свойства. Вы можете использовать встроенный, внутренний или внешний CSS, а изображения могут быть в форматах PNG, JPG, GIF или WebP.

Добавить фоновое изображение с помощью внутреннего CSS

Если вы хотите добавить фоновое изображение на всю веб-страницу, вы можете установить свойство CSS background-image для элемента <body> в элементе <style>. По умолчанию фоновое изображение будет повторяться, если оно меньше указанного элемента, в данном случае элемента <body>:

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

Следующий код на C# позволяет добавить фоновое изображение на всю страницу с помощью внутреннего CSS. Он создает элемент <style> в <head> документа с правилом CSS, которое устанавливает фоновое изображение для <body>:

Используйте класс HTMLDocument для загрузки существующего HTML из указанного каталога.
Вызовите метод CreateElement(), чтобы создать <style> для внутреннего CSS.
С помощью метода CreateTextNode() создайте правило CSS для установки фонового изображения.
С помощью метода AppendChild() вставьте CSS в виде текста внутрь элемента <style>.
С помощью метода QuerySelector() найдите элемент <head>. Если он отсутствует, вызовите CreateElement(), чтобы сгенерировать новый <head> и вставить его перед <body>.
Вызовите метод AppendChild(), чтобы добавить элемент <style> внутрь <head>.
Сохраните измененный документ в указанный выходной каталог с помощью метода 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

На рисунке показан фрагмент веб-страницы с фоновым изображением для всей страницы. Изображение повторяется, чтобы заполнить весь экран:

Текст “Текст “Hello, World!” на повторяющемся нежно-голубом фоне с брызгами воды, создающими эффект круговой ряби.”

Примечание: При использовании свойства background-image фоновое изображение будет повторяться по умолчанию, если оно меньше контейнера для указанного элемента, в данном случае элемента <body>. Вы можете управлять позиционированием фонового изображения и регулировать его масштаб с помощью различных свойств CSS:

background-position задает начальную позицию фонового изображения (например, center, top left, 50% 50%).
background-size определяет размер фонового изображения, допускает значения cover, contain или конкретные размеры (например, 100px 200px).
background-repeat определяет, повторяется ли фоновое изображение (например, repeat, no-repeat, repeat-x, repeat-y).

Эти свойства помогают обеспечить правильное отображение фонового изображения на экранах разных размеров и макетов.

Добавить фоновое изображение в HTML-элемент

Рассмотрим случай добавления фонового изображения для отдельного HTML-элемента, например – для элемента h1. Чтобы фоновое изображение не повторялось, мы указываем свойство 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

На рисунке показан фрагмент веб-страницы – HTML-файл с фоновым изображением для элемента <h1>:

Текст “Текст “Хорошего дня!” на нежно-голубом фоне с брызгами воды, создающими эффект круговой ряби.”

Добавить фоновое изображение с помощью встроенного CSS

Ниже показано, как добавить фоновое изображение к элементу <body> с помощью встроенного CSS – атрибута style со свойством CSS background-image внутри элемента <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

Выводы и рекомендации

Добавление изображений с помощью тега <img> или фоновых изображений с помощью CSS визуально и структурно улучшает веб-контент. Выбирайте подходящий способ в зависимости от того, является ли изображение декоративным или важным для контента.
Класс HTMLDocument обеспечивает гибкость для динамического редактирования HTML-контента. Всегда проверяйте наличие необходимых элементов (head, body, p и т. д.), прежде чем изменять их, например, добавляя свойства CSS.
Использование внутреннего CSS (элемент <style>) – это структурированный подход к настройке фоновых изображений, позволяющий сделать HTML чище, а стили – централизованными. Встроенный CSS (атрибут style) является альтернативой для простых случаев.
Используйте такие свойства CSS, как background-size, background-repeat и background-position, чтобы обеспечить хорошую адаптацию изображений к различным размерам экрана.

Смотрите также

В статье Добавить изображение в HTML – от базового синтаксиса до продвинутых техник вы узнаете о различных методах добавления изображений, включая использование тега <img>, фоновых изображений CSS, JavaScript и кодирования Base64.
Статья Редактировать HTML-документ содержит базовую информацию о том, как читать и изменять объектную модель документа (DOM). Вы узнаете, как создать HTML-элемент и как с ним работать программно.
Aspose.HTML предлагает бесплатные Приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, SEO-инструментов, генераторов HTML-кода, инструментов URL и многого другого. Приложения работают на любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно решать задачи, связанные с HTML.

Как изменить border color Как использовать CSS-селектор