Xml Xslt Xslt 1.0

`XSLT`를 사용하여 XML에서 HTML 변환 시 이미지 추가하는 방법

XML 문서를 HTML로 변환하는 것은 이미지와 같은 요소를 처리할 때 때때로 까다로울 수 있습니다. 많은 개발자들이 이를 구현하려고 할 때 오류를 경험하고, 문제의 근본 원인을 이해하는 것이 효과적인 솔루션을 구현하는 데 도움이 될 수 있습니다. 이 게시물에서는 일반적인 문제를 분석하고 XML에서 HTML 변환 시 이미지를 추가하는 간단하고 효율적인 방법을 제시합니다.

문제

이미지 정보를 포함하는 간단한 XML 문서를 고려해 봅시다. 이를 HTML로 변환하려고 하다가 다음과 같은 오류 메시지에 직면하는 경우:

“열려 있는 요소 시작 태그가 없을 때 속성 노드를 쓸 수 없습니다,”

이는 XSLT를 사용하여 이미지 태그의 속성을 추가하려고 할 때 문제가 있다는 것을 나타냅니다. 이 문제를 일으킬 수 있는 XML 콘텐츠와 XSLT 코드를 살펴보겠습니다.

예시 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>This is a test of the body text<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 표현식은 AVT 내에서 사용될 때 XSLT 프로세서가 텍스트 값을 가져오도록 지시합니다.

결론

XML 문서를 HTML로 변환할 때 XSLT를 사용하여 이미지를 추가하는 것은 복잡할 필요가 없습니다. 속성 값 템플릿을 사용함으로써, 일반적인 오류를 피하면서 코드를 효과적으로 간소화할 수 있습니다. 다음에 XSLT 이미지 통합 시 문제가 발생하면 AVT의 힘을 활용하여 깔끔하고 효율적인 해결책을 기억하세요.

이 원칙들을 따르면 XSLT 변환을 보다 원활하게 처리하고 불필요한 오류 없이 원하는 결과를 내는 데 도움이 될 것입니다. 즐거운 코딩 되세요!

XSLT를 사용하여 XML에서 HTML 변환 시 이미지 추가하는 방법

문제