Cómo añadir una imagen en la transformación de XML a HTML utilizando XSLT

Transformar documentos XML en HTML puede ser complicado a veces, especialmente al tratar con elementos como imágenes. Muchos desarrolladores encuentran errores al intentar implementar esto, y entender la causa raíz puede ayudar a implementar una solución efectiva. En este post, desglosaremos un problema común y presentaremos una manera simple y eficiente de añadir imágenes en tus transformaciones de XML a HTML.

El Problema

Considera un documento XML simple que contiene información de imagen. Si intentas transformarlo en HTML y te encuentras con el mensaje de error:

“No se puede escribir un nodo de atributo cuando no hay una etiqueta de inicio de elemento abierta,”

Esto indica que hay un problema con la forma en que estás intentando añadir los atributos de la etiqueta de imagen usando XSLT. Veamos el contenido XML y el código XSLT que puede llevar a este problema.

Ejemplo de Contenido XML

<root>
    <HeaderText>
        <HeaderText>Dan Testing</HeaderText>
    </HeaderText>
    <Image>
        <img width="100" height="100" alt="FPO lady" src="/uploadedImages/temp_photo_small.jpg"/>
    </Image>
    <BodyText>
        <p>Esta es una prueba del texto en el cuerpo<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

Código XSLT Correspondiente

<xsl:stylesheet version="1.0" extension-element-prefixes="msxsl"
    exclude-result-prefixes="msxsl js dl" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:js="urn:custom-javascript" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:dl="urn:datalist">
    <xsl:output method="xml" version="1.0" omit-xml-declaration="yes" indent="yes" encoding="utf-8"/>
    <xsl:template match="/" xml:space="preserve">
        <img>
            <xsl:attribute name="width">
                100
            </xsl:attribute>
            <xsl:attribute name="height">
                100
            </xsl:attribute>
            <xsl:attribute name="class">
                CalloutRightPhoto
            </xsl:attribute>
            <xsl:attribute name="src">
                <xsl:copy-of select="/root/Image/node()"/>
            </xsl:attribute>
        </img>
    </xsl:template>
</xsl:stylesheet>

Aquí, el problema radica en el siguiente fragmento de código:

<xsl:attribute name="src">
    <xsl:copy-of select="/root/Image/node()"/>
</xsl:attribute>

La instrucción xsl:copy-of intenta copiar un nodo o conjunto de nodos, pero los atributos solo pueden contener valores de texto y no nodos completos.

La Solución

En su lugar, puedes usar la instrucción xsl:value-of o una Plantilla de Valor de Atributo (AVT) para lograr la salida deseada de manera más efectiva.

Enfoque Recomendado: Usando una Plantilla de Valor de Atributo

Una solución mucho más corta y elegante es la siguiente:

<img width="100" height="100" src="{/root/Image/node()}" class="CalloutRightPhoto"/>

¿Qué son las Plantillas de Valor de Atributo (AVT)?

• El uso de {} en el atributo significa una Plantilla de Valor de Atributo.
• Permite incorporar expresiones XPATH que devuelven un valor de texto, lo que lo hace ideal para establecer atributos de forma dinámica.

Por qué Funciona

• Esta única línea reemplaza la necesidad de múltiples líneas xsl:attribute, reduciendo la complejidad.
• La expresión XPath informa al procesador XSLT que tome el valor de texto cuando se usa dentro de la AVT.

Conclusión

Añadir una imagen al transformar un documento XML a HTML mediante XSLT no tiene por qué ser complicado. Al emplear Plantillas de Valor de Atributo, puedes simplificar eficazmente tu código mientras evitas errores comunes. La próxima vez que te encuentres con problemas de incorporación de imágenes en XSLT, recuerda aprovechar el poder de las AVT para una solución limpia y eficiente.

Seguir estos principios hará que manejar las transformaciones XSLT sea más fácil y ayudará a producir los resultados que deseas sin errores innecesarios. ¡Feliz codificación!