Como Adicionar uma Imagem na Transformação de XML para HTML Usando XSLT

Transformar documentos XML em HTML pode ser complicado às vezes, especialmente ao lidar com elementos como imagens. Muitos desenvolvedores encontram erros ao tentar implementar isso, e entender a causa raiz pode ajudar na implementação de uma solução eficaz. Neste post, vamos analisar um problema comum e apresentar uma maneira simples e eficiente de adicionar imagens em suas transformações de XML para HTML.

O Problema

Considere um simples documento XML que contém informações de imagem. Se você estiver tentando transformá-lo em HTML e se deparar com a mensagem de erro:

“Não é possível escrever um nó de atributo quando nenhuma tag de início de elemento está aberta,”

Isso indica que há um problema com a forma como você está tentando adicionar os atributos da tag de imagem usando XSLT. Vamos dar uma olhada no conteúdo XML e no código XSLT que podem levar a esse problema.

Exemplo de Conteúdo XML

<root>
    <HeaderText>
        <HeaderText>Dan Testando</HeaderText>
    </HeaderText>
    <Image>
        <img width="100" height="100" alt="FPO lady" src="/uploadedImages/temp_photo_small.jpg"/>
    </Image>
    <BodyText>
        <p>Este é um teste do texto do corpo<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

Código XSLT Correspondente

<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>

Aqui, o problema reside no seguinte trecho de código:

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

A instrução xsl:copy-of tenta copiar um nó ou conjunto de nós, mas os atributos podem conter apenas valores textuais, não nós inteiros.

A Solução

Em vez disso, você pode usar a instrução xsl:value-of ou um Template de Valor de Atributo (AVT) para obter a saída desejada de forma mais eficaz.

Abordagem Recomendada: Usando um Template de Valor de Atributo

Uma solução muito mais curta e elegante é a seguinte:

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

O que são Templates de Valor de Atributo (AVT)?

• O uso de {} no atributo significa um Template de Valor de Atributo.
• Ele permite que você incorpore expressões XPATH que retornam um valor textual, tornando-o ideal para definir atributos dinamicamente.

Por que Isso Funciona

• Esta única linha substitui a necessidade de várias linhas xsl:attribute, reduzindo a complexidade.
• A expressão XPath informa ao processador XSLT para pegar o valor textual quando usada dentro do AVT.

Conclusão

Adicionar uma imagem ao transformar um documento XML em HTML via XSLT não precisa ser complicado. Ao empregar Templates de Valor de Atributo, você pode simplificar seu código de forma eficaz, evitando erros comuns. Na próxima vez que você encontrar problemas com a incorporação de imagens em XSLT, lembre-se de aproveitar o poder dos AVTs para uma solução limpa e eficiente.

Seguir esses princípios tornará a manipulação de transformações XSLT mais suave e ajudará a produzir os resultados que você deseja, sem erros desnecessários. Boa codificação!