Xml Xslt Xslt 1.0

Cara Menambahkan Gambar dalam Transformasi XML ke HTML menggunakan `XSLT`

Mentransformasi dokumen XML menjadi HTML kadang-kadang bisa rumit, terutama saat berurusan dengan elemen seperti gambar. Banyak pengembang mengalami kesalahan ketika mencoba menerapkan ini, dan memahami penyebabnya dapat membantu dalam menerapkan solusi yang efektif. Dalam pos ini, kita akan menguraikan masalah umum dan menyajikan cara yang sederhana dan efisien untuk menambahkan gambar dalam transformasi XML ke HTML Anda.

Masalah

Pertimbangkan sebuah dokumen XML sederhana yang berisi informasi gambar. Jika Anda mencoba untuk mentransformasinya menjadi HTML dan menemui pesan kesalahan:

“Tidak dapat menulis node atribut ketika tidak ada tag pembuka elemen yang terbuka,”

Ini menunjukkan bahwa ada masalah dengan bagaimana Anda mencoba menambahkan atribut tag gambar menggunakan XSLT. Mari kita lihat konten XML dan kode XSLT yang mungkin menyebabkan masalah ini.

Contoh Konten 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>Ini adalah uji coba teks badan<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

Kode XSLT yang Bersesuaian

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

Di sini, masalah terletak pada potongan kode berikut:

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

Instruksi xsl:copy-of berusaha untuk menyalin sebuah node atau nodeset, tetapi atribut hanya dapat berisi nilai teks, bukan keseluruhan node.

Solusi

Sebagai gantinya, Anda dapat menggunakan instruksi xsl:value-of atau Template Nilai Atribut (AVT) untuk mencapai keluaran yang diinginkan dengan lebih efektif.

Pendekatan yang Disarankan: Menggunakan Template Nilai Atribut

Sebuah solusi yang jauh lebih singkat dan elegan adalah sebagai berikut:

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

Apa itu Template Nilai Atribut (AVT)?

Penggunaan {} dalam atribut menunjukkan sebuah Template Nilai Atribut.
Ini memungkinkan Anda untuk menggabungkan ekspresi XPath yang mengembalikan nilai teks, sehingga ideal untuk pengaturan atribut secara dinamis.

Mengapa Ini Bekerja

Satu baris ini menggantikan kebutuhan untuk beberapa baris xsl:attribute, mengurangi kompleksitas.
Ekspresi XPath memberitahu pemroses XSLT untuk mengambil nilai teks ketika digunakan dalam AVT.

Kesimpulan

Menambahkan gambar saat mentransformasi dokumen XML menjadi HTML melalui XSLT tidak perlu rumit. Dengan menggunakan Template Nilai Atribut, Anda dapat secara efektif menyederhanakan kode Anda sambil menghindari kesalahan umum. Lain kali Anda menghadapi masalah dengan penggabungan gambar XSLT, ingatlah untuk memanfaatkan kekuatan AVT untuk solusi yang bersih dan efisien.

Mengikuti prinsip-prinsip ini akan membuat penanganan transformasi XSLT menjadi lebih lancar dan membantu menghasilkan hasil yang Anda inginkan tanpa kesalahan yang tidak perlu. Selamat coding!

Cara Menambahkan Gambar dalam Transformasi XML ke HTML menggunakan XSLT