Add Image to HTML – C#

How to Add Image to HTML

Images play an important role in effectively communicating information. Therefore, adding images to HTML documents is a critical aspect and a common requirement in web development. Aspose.HTML for .NET provides a robust solution for developers to manage images within HTML documents. You can insert an image, manipulate it, and remove or extract it from HTML documents. Let’s explore how to add images to HTML documents.

First, make sure you have Aspose.HTML for .NET installed in your project. The installation process of this library is quite simple. Open the NuGet package manager, search for Aspose.HTML, and install. You may also use the following command from the Package Manager Console:

Install-Package Aspose.HTML

HTML Image Element

You can add images to HTML documents and to web pages using an HTML <img> element. The HTML image element requires src and alt attributes. The src attribute contains a URL pointing to the image you want to embedin an HTML document or web page. The URL in the src attribute can be relative or absolute. Without the src attribute, the <img> element does not have an image to load. The alt attribute specifies alternative text for the image. Below are three options for specifying the src attribute for an <img> element – with a relative URL for an image source, an absolute URL, and with URI data (Base64 encoded image):

<img src="images/photo.png" alt="A descriptive alt text" >

<img src="https://docs.aspose.com/html/images/georgia-castle.png" alt="Ananuri Fortress Complex in Georgia" >

<img src="data:image/jpeg;base64,/9j/4RLYRXhpZgAAS..." alt="The muzzle of a lioness close-up. The lioness looks away." >

Add Image to HTML Document using C#

Using Aspose.HTML for .NET class library, you can easily create your own application, since our API provides a powerful toolset to parse and edit HTML documents. If you want to programmatically add image to HTML, see the C# code example below:

using Aspose.Html;
using System.IO;
...

    // Prepare a path to a source HTML file
    string documentPath = Path.Combine(DataDir, "document.html");

    // Prepare a path for resulting file saving 
    string savePath = Path.Combine(OutputDir, "add-image.html");

    // Create an instance of an HTML document
    using (var document = new HTMLDocument(documentPath))
    {
        var body = document.Body;

        // Create an image element
        var image = (HTMLImageElement)document.CreateElement("img");
        image.Src = "images/photo.png";
        image.Alt = "A descriptive alt text";

        // Attach the image to the document body
        body.AppendChild(image);

        // Save the HTML document to a file
        document.Save(savePath);
    }

Steps to Add Image to HTML

In this example, a new HTML image element is created, attributes are set, and the image is appended to the HTML document. The result is a modified HTML document with the added image:

1. Load the HTML document using the HTMLDocument() constructor.
2. Create a new image element using the CreateElement() method.
3. Set attributes for the image, such as the source src and alternative text alt.
4. Append the new image element to the HTML document. Use the AppendChild() method of the Node class to add the image to the end of the list of children of the document body.
5. Call the Save() method to save the modified HTML document with the added image.

Aspose.HTML for .NET is an advanced HTML parsing library. One can create, edit, navigate through nodes, extract data, merge and convert HTML, XHTML, MD, EPUB, and MHTML files to PDF, DOCX, Images, and other popular formats. Moreover, it also handles CSS, HTML Canvas, SVG, XPath, and JavaScript out-of-the-box to extend manipulation tasks. For more details about C# library installation and system requirements, please refer to Aspose.HTML Documentation .

Image alt Tag Checker – Online App

Aspose.HTML offers the Image alt Tag Checker is a free online tool designed to analyze a website and identify images lacking correct alt attributes. The application scans a webpage, finds images without alt text, and creates a report indicating which images need descriptive alt attributes. Developers can use this tool to ensure their websites meet WCAG accessibility standards.