كيفية إضافة صورة في تحويل XML إلى HTML باستخدام XSLT

يمكن أن تكون عملية تحويل مستندات XML إلى HTML صعبة في بعض الأحيان، خاصة عند التعامل مع عناصر مثل الصور. يواجه العديد من المطورين أخطاء عند محاولة تنفيذ ذلك، وفهم السبب الجذري يمكن أن يساعد في تنفيذ حل فعال. في هذه المقالة، سنقوم بتحليل مشكلة شائعة ونقدم طريقة بسيطة وفعالة لإضافة صور في تحويلات XML إلى HTML الخاصة بك.

المشكلة

افترض أن لديك مستند XML بسيط يحتوي على معلومات الصورة. إذا كنت تحاول تحويله إلى HTML وواجهت رسالة الخطأ:

“لا يمكن كتابة عقدة سمة عندما لا يكون هناك علامة بدء عنصر مفتوحة”،

فهذا يدل على وجود مشكلة في كيفية محاولة إضافة سمات علامة الصورة باستخدام XSLT. دعونا نلقي نظرة على محتوى XML وكود XSLT الذي قد يؤدي إلى هذه المشكلة.

مثال لمحتوى XML

<root>
    <HeaderText>
        <HeaderText>دان اختبار</HeaderText>
    </HeaderText>
    <Image>
        <img width="100" height="100" alt="سيدة فورية" 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 أو قالب قيمة السمة (AVT) لتحقيق الناتج المطلوب بشكل أكثر فعالية.

النهج الموصى به: استخدام قالب قيمة السمة

حل أقصر وأنيق بكثير هو كما يلي:

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

ما هي قوالب قيمة السمة (AVT)؟

• يشير استخدام {} في السمة إلى قالب قيمة السمة.
• يسمح لك بإدراج تعبيرات XPATH التي تعيد قيمة نصية، مما يجعلها مثالية لضبط السمات بشكل ديناميكي.

لماذا يعمل هذا

• يستبدل هذا السطر الواحد الحاجة إلى عدة سطور xsl:attribute، مما يقلل التعقيد.
• يع inform التعبير XPath معالج XSLT بأخذ القيمة النصية عند استخدامه داخل AVT.

الخاتمة

لا يجب أن تكون إضافة صورة عند تحويل مستند XML إلى HTML عبر XSLT معقدة. من خلال استخدام قوالب قيمة السمة، يمكنك تبسيط الكود الخاص بك بفاعلية وتجنب الأخطاء الشائعة. في المرة القادمة التي تواجه فيها مشاكل مع دمج الصور في XSLT، تذكر الاستفادة من قوة AVTs للحصول على حل نظيف وفعال.

سيساعد اتباع هذه المبادئ في جعل التعامل مع تحويلات XSLT أكثر سلاسة ويساعد في إنتاج النتائج التي تريدها بدون أخطاء غير ضرورية. برمجة سعيدة!