Comment ajouter une image dans la transformation XML vers HTML en utilisant XSLT

Transformer des documents XML en HTML peut parfois être délicat, surtout lorsque l’on traite des éléments comme les images. De nombreux développeurs rencontrent des erreurs lors de la mise en œuvre de cela, et comprendre la cause profonde peut aider à mettre en place une solution efficace. Dans cet article, nous allons décomposer un problème courant et présenter un moyen simple et efficace d’ajouter des images dans vos transformations XML vers HTML.

Le Problème

Considérons un document XML simple contenant des informations d’image. Si vous essayez de le transformer en HTML et que vous rencontrez le message d’erreur :

“Impossible d’écrire un nœud d’attribut lorsqu’aucun tag d’élément de début n’est ouvert,”

Cela indique qu’il y a un problème avec la manière dont vous essayez d’ajouter les attributs de la balise image en utilisant XSLT. Regardons le contenu XML et le code XSLT qui peuvent conduire à ce problème.

Exemple de Contenu 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>Ceci est un test du texte principal<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

Code XSLT Correspondant

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

Ici, le problème réside dans le code suivant :

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

L’instruction xsl:copy-of tente de copier un nœud ou un ensemble de nœuds, mais les attributs ne peuvent contenir que des valeurs textuelles et non des nœuds entiers.

La Solution

Au lieu de cela, vous pouvez utiliser l’instruction xsl:value-of ou un modèle de valeur d’attribut (AVT) pour obtenir la sortie souhaitée de manière plus efficace.

Approche Recommandée : Utilisation d’un Modèle de Valeur d’Attribut

Une solution beaucoup plus courte et élégante est la suivante :

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

Qu’est-ce que les Modèles de Valeur d’Attribut (AVT) ?

• L’utilisation de {} dans l’attribut signifie un Modèle de Valeur d’Attribut.
• Cela vous permet d’incorporer des expressions XPATH qui renvoient une valeur textuelle, rendant cela idéal pour définir des attributs de manière dynamique.

Pourquoi Cela Fonctionne

• Cette ligne unique remplace la nécessité de plusieurs lignes xsl:attribute, réduisant la complexité.
• L’expression XPath informe le processeur XSLT de prendre la valeur textuelle lorsqu’elle est utilisée dans l’AVT.

Conclusion

Ajouter une image lors de la transformation d’un document XML en HTML via XSLT ne doit pas être compliqué. En employant des Modèles de Valeur d’Attribut, vous pouvez rationaliser efficacement votre code tout en évitant les erreurs courantes. La prochaine fois que vous rencontrerez des problèmes avec l’incorporation d’images en XSLT, rappelez-vous de tirer parti de la puissance des AVT pour une solution propre et efficace.

Suivre ces principes rendra la gestion des transformations XSLT plus fluide et aidera à produire les résultats souhaités sans erreurs inutiles. Bon codage !