วิธีการเพิ่มภาพใน XML ให้แปลงเป็น HTML โดยใช้ XSLT

การแปลงเอกสาร XML เป็น HTML อาจจะมีความซับซ้อนในบางครั้ง โดยเฉพาะเมื่อคุณต้องจัดการกับองค์ประกอบอย่างภาพ ผู้พัฒนาหลายคนประสบกับข้อผิดพลาดเมื่อพยายามดำเนินการนี้ และการเข้าใจสาเหตุที่แท้จริงสามารถช่วยในการใช้วิธีแก้ปัญหาที่มีประสิทธิภาพ ในโพสต์นี้เราจะวิเคราะห์ปัญหาทั่วไปและเสนอวิธีง่าย ๆ และมีประสิทธิภาพในการเพิ่มภาพในการแปลง XML เป็น HTML ของคุณ

ปัญหา

พิจารณาเอกสาร XML ที่เรียบง่ายซึ่งมีข้อมูลภาพ หากคุณพยายามจะแปลงมันเป็น HTML และพบข้อความแสดงข้อผิดพลาด:

“Cannot write an attribute node when no element start tag is open,”

นี่แสดงให้เห็นว่ามีปัญหาเกี่ยวกับวิธีการที่คุณพยายามเพิ่มคุณสมบัติของแท็กภาพโดยใช้ XSLT มาลองดูเนื้อหา XML และโค้ด XSLT ที่อาจทำให้เกิดปัญหานี้กัน

เนื้อหา XML ตัวอย่าง

<root>
    <HeaderText>
        <HeaderText>ทดสอบชื่อ</HeaderText>
    </HeaderText>
    <Image>
        <img width="100" height="100" alt="FPO lady" src="/uploadedImages/temp_photo_small.jpg"/>
    </Image>
    <BodyText>
        <p>นี่คือการทดสอบข้อความในเนื้อหา<br /></p>
    </BodyText>
    <ShowLinkArrow>false</ShowLinkArrow>
</root>

โค้ด XSLT ที่เกี่ยวข้อง

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

ที่นี่ปัญหาอยู่ในโค้ดส่วนต่อไปนี้:

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

คำสั่ง xsl:copy-of พยายามที่จะคัดลอกโหนดหรือชุดโหนด แต่คุณสมัติสามารถมีค่าเป็นตัวอักษรเท่านั้น ไม่สามารถมีโหนดทั้งหมดได้

วิธีแก้ปัญหา

แทนที่จะแก้ไขปัญหานี้ คุณสามารถใช้คำสั่ง xsl:value-of หรือเทมเพลตค่าคุณสมบัติ (Attribute Value Template – AVT) เพื่อให้ได้ผลลัพธ์ที่ต้องการมีประสิทธิภาพมากขึ้น

วิธีที่แนะนำ: การใช้เทมเพลตค่าคุณสมบัติ

วิธีแก้ปัญหาที่สั้นและสวยงามยิ่งขึ้น ได้แก่:

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

เทมเพลตค่าคุณสมบัติ (AVT) คืออะไร?

• การใช้ {} ในคุณสมบัตินั้นแสดงถึงเทมเพลตค่าคุณสมบัติ
• มันทำให้คุณสามารถรวมการแสดงผล XPATH ที่คืนค่าข้อความทำให้เหมาะสมสำหรับการตั้งค่าคุณสมบัติอย่างไดนามิก

ทำไมวิธีนี้ถึงได้ผล

• บรรทัดเดียวนี้แทนที่ความจำเป็นหลายบรรทัดของ xsl:attribute ลดความซับซ้อน
• การแสดง XPath แจ้งให้โปรเซสเซอร์ XSLT เอาค่าข้อความเมื่อใช้ใน AVT

บทสรุป

การเพิ่มภาพเมื่อแปลงเอกสาร XML เป็น HTML ผ่าน XSLT ไม่จำเป็นต้องซับซ้อน โดยการใช้เทมเพลตค่าคุณสมบัติ คุณสามารถทำให้โค้ดของคุณมีประสิทธิภาพมากขึ้นและหลีกเลี่ยงข้อผิดพลาดทั่วไป ครั้งถัดไปที่คุณพบปัญหาเกี่ยวกับการนำภาพเข้ากับ XSLT จำไว้ว่าควรใช้พลังของ AVTs ในการจัดการโค้ดให้สะอาดและมีประสิทธิภาพ

การปฏิบัติตามหลักการเหล่านี้จะทำให้การจัดการการแปลง XSLT ราบรื่นยิ่งขึ้นและช่วยผลิตผลลัพธ์ที่คุณต้องการโดยไม่เกิดข้อผิดพลาดที่ไม่จำเป็น ขอให้สนุกกับการเขียนโค้ด!