Wie man ein Bild in die XML zu HTML Transformation mit XSLT hinzufügt

Das Transformieren von XML-Dokumenten in HTML kann manchmal knifflig sein, insbesondere wenn es um Elemente wie Bilder geht. Viele Entwickler stoßen auf Fehler, wenn sie versuchen, dies zu implementieren, und das Verstehen der Ursache kann helfen, eine effektive Lösung zu finden. In diesem Beitrag werden wir ein häufiges Problem aufschlüsseln und Ihnen eine einfache und effiziente Methode zeigen, um Bilder in Ihren XML zu HTML Transformationen hinzuzufügen.

Das Problem

Betrachten wir ein einfaches XML-Dokument, das Bildinformationen enthält. Wenn Sie versuchen, es in HTML zu transformieren und auf die Fehlermeldung stoßen:

“Kann kein Attributknoten schreiben, wenn kein Element-Start-Tag geöffnet ist,”

Dies weist darauf hin, dass es ein Problem gibt, wie Sie versuchen, die Attribute des Bild-Tags mit XSLT hinzuzufügen. Werfen wir einen Blick auf den XML-Inhalt und den XSLT-Code, der zu diesem Problem führen kann.

Beispiel XML-Inhalt

<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>Dies ist ein Test des Fließtextes<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

Entsprechender XSLT-Code

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

Hier liegt das Problem im folgenden Codeschnipsel:

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

Die Anweisung xsl:copy-of versucht, einen Knoten oder eine Knotenmenge zu kopieren, aber Attribute können nur Textwerte enthalten, keine gesamten Knoten.

Die Lösung

Stattdessen können Sie die Anweisung xsl:value-of oder eine Attributwertvorlage (AVT) verwenden, um das gewünschte Ergebnis effektiver zu erzielen.

Empfohlener Ansatz: Verwendung einer Attributwertvorlage

Eine viel kürzere und elegantere Lösung ist wie folgt:

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

Was sind Attributwertvorlagen (AVT)?

• Die Verwendung von {} im Attribut kennzeichnet eine Attributwertvorlage.
• Sie ermöglicht es Ihnen, XPath-Ausdrücke zu integrieren, die einen Textwert zurückgeben, was sie ideal für das dynamische Setzen von Attributen macht.

Warum das funktioniert

• Diese einzelne Zeile ersetzt die Notwendigkeit für mehrere xsl:attribute-Zeilen und verringert die Komplexität.
• Der XPath-Ausdruck informiert den XSLT-Prozessor, den Textwert zu verwenden, wenn er innerhalb der AVT verwendet wird.

Fazit

Das Hinzufügen eines Bildes beim Transformieren eines XML-Dokuments in HTML über XSLT muss nicht kompliziert sein. Durch die Verwendung von Attributwertvorlagen können Sie Ihren Code effektiv optimieren und häufige Fehler vermeiden. Wenn Sie das nächste Mal Probleme mit der Bildintegration in XSLT haben, denken Sie daran, die Kraft von AVTs für eine saubere und effiziente Lösung zu nutzen.

Die Anwendung dieser Prinzipien wird den Umgang mit XSLT-Transformationen erleichtern und helfen, die gewünschten Ergebnisse ohne unnötige Fehler zu erzielen. Viel Spaß beim Programmieren!