XML’den HTML’ye Dönüşümde XSLT Kullanarak Resim Nasıl Eklenir

XML belgelerini HTML’ye dönüştürmek bazen karmaşık olabilir, özellikle de resimler gibi öğelerle çalışırken. Birçok geliştirici, bunu uygulamaya çalışırken hatalarla karşılaşmaktadır ve sorunun kökenini anlamak etkili bir çözüm uygulamakta yardımcı olabilir. Bu yazıda, yaygın bir sorunu inceleyecek ve XML’den HTML’ye dönüşümlerinizde resim eklemenin basit ve etkili bir yolunu sunacağız.

Problem

Basit bir resim bilgisi içeren XML belgesini ele alalım. Eğer bunu HTML’ye dönüştürmeye çalışırken şu hata mesajıyla karşılaşırsanız:

“Bir element başlangıç etiketi açık olmadığında bir nitelik düğümü yazılamaz,”

Bu, XSLT kullanarak resim etiketinin niteliklerini eklemeye çalıştığınızda bir sorun olduğunu gösterir. Soruna yol açabilecek XML içeriğine ve XSLT koduna bakalım.

Örnek XML İçeriği

<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>This is a test of the body text<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

İlgili XSLT Kodu

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

Burada sorun, aşağıdaki kod parçasında yatmaktadır:

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

xsl:copy-of komutu bir düğüm veya düğüm setini kopyalamaya çalışır, ancak nitelikler yalnızca metin değerleri içerebilir, tam düğümler değil.

Çözüm

Bunun yerine, istenen çıktıyı daha etkili bir şekilde elde etmek için xsl:value-of komutunu veya bir Nitelik Değer Şablonu (AVT) kullanabilirsiniz.

Önerilen Yaklaşım: Nitelik Değer Şablonu Kullanma

Çok daha kısa ve zarif bir çözüm aşağıdaki gibidir:

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

Nitelik Değer Şablonları (AVT) Nedir?

• Nitelikteki {} kullanımı, bir Nitelik Değer Şablonunu ifade eder.
• İfadeyi metin değerini döndüren XPATH ifadeleriyle birleştirmenizi sağlar, bu da dinamik olarak nitelikler ayarlamak için idealdir.

Neden Bu Çalışır

• Bu tek satır, birden fazla xsl:attribute satırının yerine geçerek karmaşıklığı azaltır.
• XPath ifadesi, AVT içinde kullanıldığında XSLT işlemcisini metin değerini alması için bilgilendirir.

Sonuç

XSLT ile XML belgesini HTML’ye dönüştürürken resim eklemek karmaşık olmak zorunda değil. Nitelik Değer Şablonlarını kullanarak kodunuzu etkili bir şekilde sadeleştirebilir ve yaygın hatalardan kaçınabilirsiniz. Bir sonraki XSLT resim dahil etme sorunuyla karşılaştığınızda, temiz ve etkili bir çözüm için AVT’lerin gücünden yararlanmaya dikkat edin.

Bu ilkeleri takip etmek, XSLT dönüşümlerini daha akıcı hale getirecek ve istenen sonuçları gereksiz hatalar olmadan üretmenize yardımcı olacaktır. İyi kodlamalar!