¿Cómo añadir imágenes a HTML? Ejemplos C

Si las páginas web sólo contuvieran texto, carecerían de atractivo visual y no lograrían atraer a los usuarios de forma eficaz. Las imágenes y otros elementos multimedia mejoran la experiencia del usuario haciendo que el contenido sea más atractivo, interactivo y fácil de entender.

En este artículo, utilizaremos ejemplos de C# para mostrar diferentes formas de insertar una imagen en HTML utilizando la librería Aspose.HTML for .NET.

Para obtener información básica con ejemplos HTML sobre cómo añadir imágenes a HTML utilizando la etiqueta <img>, fondos CSS, JavaScript y codificación Base64, por favor visite el artículo Añadir Imagen a HTML – De la Sintaxis Básica a las Técnicas Avanzadas.

Añadir imagen a HTML

Usando la clase HTMLDocument, puedes crear un elemento <img>, establecer atributos como src, alt, width y height, y añadirlo al documento HTML, colocándolo donde quieras.

Añadir imagen a un HTML vacío

Si creas un HTML desde cero y quieres añadir una imagen, debes seguir unos pasos:

Cree una instancia de la clase HTMLDocument.
Recupere el elemento <body> utilizando el método GetElementsByTagName().
Crear un elemento <img> utilizando el método CreateElement().
Establezca los atributos de la imagen utilizando el método SetAttribute().
Utilice el método AppendChild() para insertar el elemento <img> en el cuerpo del documento.
Guarde el documento modificado en el directorio de salida especificado utilizando el método Save().

 1// Create a new HTML document
 2using (HTMLDocument document = new HTMLDocument())
 3{
 4    // Get a reference to the <body> element
 5    HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
 6
 7    // Create an <img> element
 8    var img = document.CreateElement("img");
 9    img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Specify a link URL or local path
10    img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
11    img.SetAttribute("width", "128"); // Set parameters optionally
12    img.SetAttribute("height", "128");
13
14    // Add the <img> element to the <body>
15    body.AppendChild(img);
16
17    // Save file to a local file system
18    document.Save(Path.Combine(OutputDir, "add-image.html"), new HTMLSaveOptions());
19}

Example-AddImageToHTML hosted with ❤ by GitHub

Añadir Imagen a HTML Existente

Puede insertar una imagen colocándola en la ubicación deseada del HTML. El siguiente ejemplo en C# muestra cómo añadir la imagen después del segundo elemento <p>:

Abra un archivo HTML existente utilizando la clase HTMLDocument.
Utiliza el método GetElementsByTagName("p") para recoger todos los elementos <p> del documento HTML y almacenarlos en una HTMLCollection.
Asegúrese de que existen al menos dos párrafos antes de proceder con las modificaciones. La sentencia if asegura que el documento contiene al menos dos elementos de párrafo verificando que paragraphs.Length >= 2.
Utiliza el método CreateElement("img") para generar un nuevo elemento <img> y establece sus atributos src, alt, width y height.
Recupera el segundo elemento <p> (paragraphs[1]) de la colección. Dado que las colecciones en C# utilizan indexación basada en cero, paragraphs[1] se refiere al segundo elemento <p> del documento.
Utiliza la función InsertBefore(img, secondParagraph.NextSibling) para colocar la imagen recién creada justo después del segundo párrafo.
Guarde el documento modificado en el directorio de salida especificado utilizando el método Save().

 1// Load an existing HTML document
 2using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "file.html")))
 3{
 4    // Get all <p> (paragraph) elements
 5    HTMLCollection paragraphs = document.GetElementsByTagName("p");
 6
 7    // Check if there are at least two paragraphs
 8    if (paragraphs.Length >= 2)
 9    {
10        // Create a new <img> element
11        var img = document.CreateElement("img");
12        img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Set image source (URL or local path)
13        img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
14        img.SetAttribute("width", "128");
15        img.SetAttribute("height", "128");
16
17        // Get the second paragraph
18        Element secondParagraph = paragraphs[1];
19
20        // Insert the image after the second paragraph
21        secondParagraph.ParentNode.InsertBefore(img, secondParagraph.NextSibling);
22    }
23
24    // Save the updated HTML document
25    document.Save(Path.Combine(OutputDir, "add-image-after-paragraph.html"), new HTMLSaveOptions());
26}

Example-AddImageToExistingHTML hosted with ❤ by GitHub

Este código C# carga un archivo HTML existente, recupera todos los elementos <p>, y comprueba si hay al menos dos. Si es así, crea un nuevo elemento <img>, establece sus atributos src, alt, width, y height, e inserta esta imagen después del segundo párrafo.

Imágenes de fondo HTML

Insertar una imagen como fondo en HTML es fácil con la propiedad CSS background-image. Hay varias formas de establecer el valor de esta propiedad. Puedes utilizar CSS en línea, interno o externo, y las imágenes pueden ser de formato PNG, JPG, GIF o WebP.

Añadir imagen de fondo usando CSS interno

Si quieres añadir una imagen de fondo a toda la página web, puedes establecer la propiedad CSS background-image en el elemento <body> dentro del elemento <style>. Por defecto, una imagen de fondo se repetirá si es más pequeña que el elemento especificado, en este caso, el elemento <body>:

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

El siguiente código C# permite añadir una imagen de fondo a toda la página utilizando CSS interno. Crea un elemento <style> en el <head> del documento con una regla CSS que establece una imagen de fondo para el <body>:

Utiliza la clase HTMLDocument para cargar un HTML existente del directorio especificado.
Llame al método CreateElement() para crear un <style> para CSS interno.
Utilice el método CreateTextNode() para crear una regla CSS para establecer la imagen de fondo.
Utiliza el métodoAppendChild() para insertar el CSS como texto dentro del elemento <style>.
Utilice el método QuerySelector() para encontrar el elemento <head>. Si falta, llama a CreateElement() para generar un nuevo <head> e insertarlo antes de <body>.
Llama al método AppendChild() para añadir el elemento <style> dentro de <head>.
Guarde el documento modificado en el directorio de salida especificado usando el método Save().

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

Example-AddBackgroundImageToHTML hosted with ❤ by GitHub

La figura muestra un fragmento de la página web con imagen de fondo para toda la página. La imagen se repite para llenar toda la pantalla:

Texto “Texto “¡Hola, mundo!” sobre un fondo azul suave repetido con una salpicadura de agua que crea un efecto de ondulación circular.”

Nota: Al utilizar la propiedad background-image, la imagen de fondo se repetirá por defecto si es más pequeña que el contenedor del elemento especificado, en este caso, el elemento <body>. Puedes controlar la posición de una imagen de fondo y ajustar su escala utilizando varias propiedades CSS:

background-position especifica la posición inicial de la imagen de fondo (por ejemplo, center, top left, 50% 50%).
background-size define el tamaño de la imagen de fondo, permitiendo valores como cover, contain, o dimensiones específicas (por ejemplo, 100px 200px).
background-repeat determina si la imagen de fondo se repite (por ejemplo, repeat, no-repeat, repeat-x, repeat-y).

Estas propiedades ayudan a garantizar que la imagen de fondo aparezca correctamente en diferentes tamaños y diseños de pantalla.

Añadir imagen de fondo al elemento HTML

Consideremos el caso de añadir una imagen de fondo para un elemento HTML separado, por ejemplo – para el elemento h1. Para evitar que la imagen de fondo se repita, especificamos la propiedad background-repeat.

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

Example-AddBackgroundImageToH1Element hosted with ❤ by GitHub

La figura muestra un fragmento de la página web – archivo HTML con imagen de fondo para el elemento <h1>:

Texto “Texto “¡Que tenga un buen día!” sobre un fondo azul suave con una salpicadura de agua que crea un efecto de ondulación circular.”

Añadir imagen de fondo con CSS en línea

A continuación se muestra cómo añadir una imagen de fondo a un elemento <body> utilizando CSS en línea – el atributo style con la propiedad CSS background-image dentro del elemento <body>:

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

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

Example-AddBackgroundImageToHTMLUsingInlineCss hosted with ❤ by GitHub

Conclusiones y recomendaciones

Añadir imágenes mediante la etiqueta <img> o imágenes de fondo a través de CSS mejora visual y estructuralmente el contenido de la web. Elige la forma adecuada en función de si la imagen es decorativa o esencial para el contenido.
La clase HTMLDocument proporciona flexibilidad para la edición dinámica del contenido HTML. Comprueba siempre si existen los elementos necesarios (head, body, p, etc.) antes de modificarlos, por ejemplo añadiendo propiedades CSS.
Usar CSS interno (el elemento <style>) es un enfoque estructurado para establecer imágenes de fondo, manteniendo el HTML más limpio y los estilos centralizados. El CSS en línea (el atributo style) es una alternativa para casos sencillos.
Utiliza propiedades CSS como background-size, background-repeat y background-position para asegurarte de que las imágenes se ajustan bien a los distintos tamaños de pantalla.

Véase también

En el artículo Añadir Imagen a HTML – De la Sintaxis Básica a las Técnicas Avanzadas, aprenderás sobre diferentes métodos para añadir imágenes, incluyendo el uso de la etiqueta <img>, las imágenes de fondo CSS, JavaScript y la codificación Base64.
El artículo Editar documento HTML le ofrece información básica sobre cómo leer o modificar el Modelo de objetos del documento (DOM). Explorará cómo crear un elemento HTML y cómo trabajar con él utilizando Aspose.HTML for .NET.
Aspose.HTML ofrece Aplicaciones Web HTML gratuitas que son una colección en línea de conversores, fusiones, herramientas SEO, generadores de código HTML, herramientas URL y mucho más. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren la instalación de ningún software adicional. Es una forma rápida y sencilla de resolver con eficiencia y eficacia tus tareas relacionadas con HTML.

Cómo cambiar el color del borde Cómo utilizar el selector CSS